Multi item carousel

React Bootstrap 5 Multi item carousel plugin

An advanced slideshow component for cycling through images with a selectable number of active items.

Responsive Multi item carousel built with Bootstrap 5, React 18 and Material Design 2.0. Many practical examples like lightbox integration, Vertical, autoplay, and many more.

Note: Read the API tab to find all available options and advanced customization

Basic example

A basic example of a multi carousel with the most common use case with 3 active items (default version). 

import React from 'react';
import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';

export default function App() {
  return (
    <MDBMultiCarousel>
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp'
        alt='Table Full of Spices'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp'
        alt='Winter Landscape'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp'
        alt='View of the City in the Mountains'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp'
        alt='Place Royale Bruxelles'
      />
    </MDBMultiCarousel>
  );
}

Vertical example

To enable vertical mode just add vertical property to the wrapper element.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
import React from 'react';
import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';

export default function App() {
  return (
    <MDBMultiCarousel vertical>
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp'
        alt='Table Full of Spices'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp'
        alt='Winter Landscape'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp'
        alt='View of the City in the Mountains'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp'
        alt='Place Royale Bruxelles'
      />
    </MDBMultiCarousel>
  );
}

Lightbox integration

Wrap carousel by a MDBLightbox component and add lightbox property to the wrapper to enable lightbox.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
import React from 'react';
import { MDBLightbox } from 'mdb-react-ui-kit';
import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';

export default function App() {
  return (
    <MDBLightbox>
      <MDBMultiCarousel lightbox>
        <MDBMultiCarouselItem
          src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp'
          fullscreenSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp'
          alt='Table Full of Spices'
        />
        <MDBMultiCarouselItem
          src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp'
          fullscreenSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp'
          alt='Winter Landscape'
        />
        <MDBMultiCarouselItem
          src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp'
          fullscreenSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp'
          alt='View of the City in the Mountains'
        />
        <MDBMultiCarouselItem
          src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp'
          fullscreenSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'
          alt='Place Royale Bruxelles'
        />
      </MDBMultiCarousel>
    </MDBLightbox>
  );
}

Active items

Set a items property to change the number of active images.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
import React from 'react';
import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';

export default function App() {
  return (
    <MDBMultiCarousel items={2}>
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp'
        alt='Table Full of Spices'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp'
        alt='Winter Landscape'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp'
        alt='View of the City in the Mountains'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp'
        alt='Place Royale Bruxelles'
      />
    </MDBMultiCarousel>
  );
}

Breakpoint

To change breakpoint on small devices easily set breakpoint property value (default value is 992). Set to false to disable responsiveness.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
import React from 'react';
import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';

export default function App() {
  return (
    <MDBMultiCarousel breakpoint={1200}>
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp'
        alt='Table Full of Spices'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp'
        alt='Winter Landscape'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp'
        alt='View of the City in the Mountains'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp'
        alt='Place Royale Bruxelles'
      />
    </MDBMultiCarousel>
  );
}

Autoplay

Set a interval property to enable autoplay.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
import React from 'react';
import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';

export default function App() {
  return (
    <MDBMultiCarousel interval={2000}>
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp'
        alt='Table Full of Spices'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp'
        alt='Winter Landscape'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp'
        alt='View of the City in the Mountains'
      />
      <MDBMultiCarouselItem
        src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp'
        alt='Place Royale Bruxelles'
      />
    </MDBMultiCarousel>
  );
}

Multi Item Carousel - API

Import

import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';

Properties