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).

Show code

        
            
          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.

Show code

        
            
          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.

Show code

        
            
          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.

Show code

        
            
          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.

Show code

        
            
          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.

Show code

        
            
          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

Show code

javascript

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

Properties

MDBMultiCarousel

Name	Type	Default	Description	Example
`breakpoint`	number \| string \| boolean	`992`	Defines window breakpoint in px to show only one item. Set to false to disable.	`<MDBMultiCarousel breakpoint={1200} />`
`interval`	number \| string \| boolean	`false`	Defines autoplay interval. Disabled as a default.	`<MDBMultiCarousel interval={2000} />`
`items`	number \| string	`3`	Defines number of visible items.	`<MDBMultiCarousel items={4} />`
`lightbox`	boolean	`false`	Enables lightbox handling	`<MDBMultiCarousel lightbox />`
`multiCarouselRef`	React.MutableRefObject<any>		A reference for the MDBMultiCarousel component	`<MDBMultiCarousel multiCarouselRef={someRef} />`
`vertical`	boolean	`false`	Positions carousel vertically	`<MDBMultiCarousel vertical />`

MDBMultiCarouselItem

Name	Type	Default	Description	Example
`alt`	string	`''`	Defines alt attribute of img element.	`<MDBMultiCarouselItem alt='Image 1' />`
`caption`	string	`''`	Defines a caption for the item	`<MDBMultiCarouselItem caption='Test caption' />`
`disabled`	boolean	`false`	Creates a disabled image in the lightbox	`<MDBMultiCarouselItem disabled />`
`fullscreenSrc`	string	`''`	Defines a fullscreen source for the item	`<MDBMultiCarouselItem fullscreenSrc='...' />`
`imageClassName`	string	`''`	Adds an additional classes to images	`<MDBMultiCarouselItem imageClassName='Test' />`
`multiCarouselItemRef`	React.Ref<any>	`''`	A reference to the multi carousel item	`<MDBMultiCarouselItem multiCarouselItemRef={someRef} />`
`src`	string	`''`	Defines a thumbnail source for the item	`<MDBMultiCarouselItem src='...' />`

Multi item carousel

React Bootstrap 5 Multi item carousel plugin

Basic example

Vertical example

Lightbox integration

Active items

Breakpoint

Autoplay

Related resources

Multi Item Carousel - API

Import

Properties

MDBMultiCarousel

MDBMultiCarouselItem