React Carousel Slider with Thumbnails
React Bootstrap 5 Carousel Slider with Thumbnails component
Learn how to build a responsive carousel with React Bootstrap 5. Tutorial & templates for image gallery slider with thumbnails. Vertical carousel example included.
Basic example
A simple react bootstrap slider with arrows and thumbnails as controls.
.webp)
.webp)
.webp)
import React, { useCallback, useRef, useState } from "react";
import {
MDBCarousel,
MDBCarouselInner,
MDBCarouselItem,
MDBCarouselElement,
MDBContainer,
} from "mdb-react-ui-kit";
export default function App() {
const [currentSlide, setCurrentSlide] = useState(0);
const carouselInner = useRef(null);
const slideChanged = useCallback(() => {
const activeItem = carouselInner.current.querySelector(".active");
setCurrentSlide(
Array.from(carouselInner.current.children).indexOf(activeItem)
);
}, []);
const changeSlide = useCallback((position) => {
Array.from(carouselInner.current.children).forEach((el, i) => {
if (i !== position) {
el.classList.remove("active");
} else {
el.classList.add("active");
slideChanged();
}
});
}, []);
return (
<MDBContainer className="mt-5">
<MDBCarousel
id="carouselExampleIndicators"
showControls
fade
onSlide={slideChanged}
>
<MDBCarouselInner ref={carouselInner}>
<MDBCarouselItem className="active">
<MDBCarouselElement
src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).webp"
alt="..."
/>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement
src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).webp"
alt="..."
/>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement
src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp"
alt="..."
/>
</MDBCarouselItem>
</MDBCarouselInner>
<div className="carousel-indicators" style={{ marginBottom: "-20px" }}>
<button
className={`carousel-indicator ${currentSlide === 0 ? "active" : ""}`}
onClick={() => changeSlide(0)}
style={{ width: "100px" }}
>
<img
className="d-block w-100 img-fluid"
src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).webp"
/>
</button>
<button
className={`carousel-indicator ${currentSlide === 1 ? "active" : ""}`}
onClick={() => changeSlide(1)}
style={{ width: "100px" }}
>
<img
className="d-block w-100 img-fluid"
src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).webp"
/>
</button>
<button
className={`carousel-indicator ${currentSlide === 2 ? "active" : ""}`}
onClick={() => changeSlide(2)}
style={{ width: "100px" }}
>
<img
className="d-block w-100 img-fluid"
src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp"
/>
</button>
</div>
</MDBCarousel>
</MDBContainer>
);
}
.carousel-indicators .carousel-indicator {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 3px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: .5;
transition: opacity .6s ease;
}
.carousel-indicators .carousel-indicator.active {
opacity: 1;
}
Material Design styling
This carousel looks more pleasant thanks to the rounded corners and shadow applied in accordance with Material Design guidelines.
import React, { useCallback, useRef, useState } from "react";
import {
MDBCarousel,
MDBCarouselInner,
MDBCarouselItem,
MDBCarouselElement,
MDBContainer,
} from "mdb-react-ui-kit";
export default function Styled() {
const [currentSlide, setCurrentSlide] = useState(0);
const carouselInner = useRef(null);
const slideChanged = useCallback(() => {
const activeItem = carouselInner.current.querySelector(".active");
setCurrentSlide(
Array.from(carouselInner.current.children).indexOf(activeItem)
);
}, []);
const changeSlide = useCallback((position) => {
Array.from(carouselInner.current.children).forEach((el, i) => {
if (i !== position) {
el.classList.remove("active");
} else {
el.classList.add("active");
slideChanged();
}
});
}, []);
return (
<MDBContainer className="mt-5">
<MDBCarousel
id="carouselExampleIndicators"
showControls
fade
onSlide={slideChanged}
>
<MDBCarouselInner ref={carouselInner} className="rounded-3 shadow-1-strong">
<MDBCarouselItem className="active">
<MDBCarouselElement
src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).webp"
alt="..."
/>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement
src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).webp"
alt="..."
/>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement
src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp"
alt="..."
/>
</MDBCarouselItem>
</MDBCarouselInner>
<div className="carousel-indicators" style={{ marginBottom: "-20px" }}>
<button
className={`carousel-indicator ${currentSlide === 0 ? "active" : ""}`}
onClick={() => changeSlide(0)}
style={{ width: "100px" }}
>
<img
className="d-block w-100 img-fluid shadow-1-strong rounded"
src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).webp"
/>
</button>
<button
className={`carousel-indicator ${currentSlide === 1 ? "active" : ""}`}
onClick={() => changeSlide(1)}
style={{ width: "100px" }}
>
<img
className="d-block w-100 img-fluid shadow-1-strong rounded"
src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).webp"
/>
</button>
<button
className={`carousel-indicator ${currentSlide === 2 ? "active" : ""}`}
onClick={() => changeSlide(2)}
style={{ width: "100px" }}
>
<img
className="d-block w-100 img-fluid shadow-1-strong rounded"
src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp"
/>
</button>
</div>
</MDBCarousel>
</MDBContainer>
);
}
.carousel-indicators .carousel-indicator {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 3px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: .5;
transition: opacity .6s ease;
}
.carousel-indicators .carousel-indicator.active {
opacity: 1;
}
eCommerce gallery (vertical thumbnails)
An example of a react bootstrap product carousel with zoom effect and vertical thumbnails, adjusted to eCommerce projects.
To learn more read eCommerce Gallery Docs.
Note: This component requires MDBootstrap Pro package.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const carouselPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imageSrc={carouselPhotos} carousel thumbnailsPosition='left' />
)
}