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 17 and Material Design. 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
`className`	string	`''`	Adds a custom class to MDBMultiCarousel	`<MDBMultiCarousel className="class" />`
`items`	number \| string	`3`	Defines number of visible items.	`<MDBMultiCarousel items={4} />`
`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} />`
`vertical`	boolean	`false`	Positions carousel vertically	`<MDBMultiCarousel vertical />`
`lightbox`	boolean	`false`	Enables lightbox handling	`<MDBMultiCarousel lightbox />`
`multiCarouselRef`	React.MutableRefObject<any>		A reference for the MDBMultiCarousel component	`<MDBMultiCarousel multiCarouselRef={someRef} />`

MDBMultiCarouselItem

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