Create a Beautiful React Bootstrap Carousel
React Bootstrap is the “Most popular front-end framework” for building interactive and responsive UI components in just a few lines of code.
Today, we’ll learn how to use React Bootstrap Carousel and create a beautiful carousel. You’ll also learn how to customize React Bootstrap components with custom CSS.
This is what we’ll create, looks clean and elegant, right?
Here’s the the complete source code link.
Before we get started make sure to create a new React app, that’ll take a while so why don’t you just head over to Codesandbox and create it in just a single click.
About Codesandbox –
Codesandbox is an online code editor which embeds most of the VS code features. It helps to create, run and share websites and web apps super fast. I personally use it to test or create small projects.
React Bootstrap Carousel ⇒
You can also refer to the React Bootstrap official documentation.
#1 Install and Setup React Bootstrap Environment –
If you have your React app ready, let’s install React Bootstrap, head to the terminal or if you’re using Codesandbox, then you can just type the package name and hit enter in the add dependencies input box.
npm install react-bootstrap bootstrap
#or
yarn add react-bootstrap bootstrap
Now, head over to index.jsand import the bootstrap CSS.
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
//bootstrap css
import "bootstrap/dist/css/bootstrap.min.css";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
#2 Let’s Create a Carousel Component –
Create a folder Components ⇒ and add two files Slider.jsx & Slider.css. I am using “Slider” as the file name to avoid the React Bootstrap component name conflict.
import React from "react";
import { Container, Carousel, Image } from "react-bootstrap";
import "./slider.css";
Here, we are importing 3 components from React Bootstrap, Container which gives us a default margin and padding, or let’s say a layout. The Image component will help us make our Image responsive. Finally, the Carousel component is what we’ll use to make the Carousel.
Here’s dummy data, though you are free to use any.
const customers = [
{
name: "Taylor Swift",
content:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab officia numquam possimus illum officiis at sed quos doloremque molestias. Quae.",
link:
"<https://akns-images.eonline.com/eol_images/Entire_Site/2019430/rs_600x600-190530093053-taylor-swift-cat-3.jpg?fit=around%7C1200:1200&output-quality=90&crop=1200:1200;center,top>"
},
{
name: "Robert Downey Jr",
content:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab officia numquam possimus illum officiis at sed quos doloremque molestias. Quae.",
link:
"<https://i.pinimg.com/originals/2f/4b/32/2f4b32cba8cfdd9b9148ac464e167c1e.jpg>"
},
{
name: "Rachel Green",
content:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab officia numquam possimus illum officiis at sed quos doloremque molestias. Quae.",
link:
"<https://i.pinimg.com/originals/2f/4b/32/2f4b32cba8cfdd9b9148ac464e167c1e.jpg>"
}
];
Let’s create the Slider function. We’ll wrap everything in the Container component.
function Slider() {
return (
<Container className="customers-container">
<h2 className="customers-container-heading">Happy Customers</h2>
<Carousel className="customers-carousel-container">
{customers.map((data, i) => (
<Carousel.Item className="customers-carousel-item">
<Image
className="d-block customers-carousel-img"
src= {data.link}
alt={data.name}
/>
<Carousel.Caption className="customers-carousel-caption">
<h5 className="customers-caption-title">{data.name}</h5>
<p>
<q>
{data.content}
</q>
</p>
</Carousel.Caption>
</Carousel.Item>
))}
</Carousel>
</Container>
);
}
export default Slider;
As you can see, first we are wrapping the data inside the Carousel component. Each Carousel inside the component is the Carousel.Item. So, we are mapping the customers array to the Carousel.Item component.
To add caption, we use Carousel.Caption component.
Also, check out,
React Router Version 6 Tutorial for Beginners
#3 CSS to customize –
/*app.css*/
.App {
font-family: sans-serif;
text-align: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
body {
background-color: #212529 !important;
}
/*slider.css */
.customers-container {
margin: 8% 0;
color: black;
}
.customers-carousel-container {
margin: 3%;
}
.customers-container-heading {
color: #fefefe;
margin: 2% auto;
text-align: center;
font-weight: 700;
}
.customers-carousel-img {
height: 150px;
width: 150px;
margin: 0 auto 3%;
border-radius: 50%;
}
.carousel-caption {
position: relative;
left: 0;
right: 0;
bottom: 1.25rem;
padding-top: 1.25rem;
margin: auto;
color: #fefefe;
text-align: center;
width: 50%;
}
.customers-carousel-caption p {
color: rgb(209, 202, 202);
}
@media screen and (max-width: 550px) {
.customers-carousel-img {
height: 100px;
width: 100px;
}
.customers-carousel-caption p {
font-size: 14px;
}
}
/*
.carousel-indicators [data-bs-target] {
display: none;
} */
There’s a commented code of CSS that you can use to disable indicators on the Carousel. You can use the class name as described in the documentation, but I find this a better option.
There are many more options that you can use to customize the carousel as per your need. You can refer to the React Bootstrap Carousel documentation to learn more.
- Frontegg: Best Auth System for your Frontend - September 27, 2022
- NextJS vs ReactJS: Which is the best for your project? - September 26, 2022
- 5 Amazing React libraries to make your App Stand Out! - July 28, 2022
0 Comments