Carousel

The carousel is a wrapper component that contains multiple slides, which can be other components (e.g. Banners), images, or fully custom content.

Example

Live Editor

function Example() {
  const slides = [
     <Banner title="One" description="Banner description" />,
     <Banner title="Two" description="Banner description" />,
     <Banner title="Three" description="Banner description" />
  ];

  return (
    <Carousel slides={slides} />
  );
}

Result

Loading...

Usage Rules

Do:

• Always have at least one of the two navigation elements for the carousel.

Don't:

• Hide both Navigation and Pagination of the Carousel.

Variants

AutoPlay

The Carousel autoplay will be activated by adding autoplay object with a delay prop in settings as below. The autoplay can be disabled on interactions by adding disableOnInteraction: true in autoplay object.

Live Editor

function Example() {
  const settings = {
        slidesPerView: 3,
        spaceBetween: 16,
        autoplay: {
           delay: 3000,
           disableOnInteraction: true
        }
      };
      const slides = [
        <Banner title="One" description="Banner description" />,
        <Banner title="Two" description="Banner description" />,
        <Banner title="Three" description="Banner description" />,
        <Banner title="Four" description="Banner description" />,
        <Banner title="Five" description="Banner description" />,
        <Banner title="Six" description="Banner description" />
      ];

  return (
    <Carousel settings={settings} slides={slides}/>
  );
}

Result

Loading...

Center mode

The Carousel center mode can be activated by adding centeredSlides: true in settings.

Live Editor

function Example() {
  const settings = {
        centeredSlides: true,
        slidesPerView: 'auto',
      };
      const slides = [
        <Banner title="One" description="Some long text content to get more space for Banner description" />,
        <Banner title="Two" description="Banner description" />,
        <Banner title="Three" description="Banner description text" />,
        <Banner title="Four" description="Some long text content to get more space for Banner description" />,
        <Banner title="Five" description="Banner description" />,
        <Banner title="Six" description="Some long text content to get more space for Banner description" />
      ];

  return (
    <Carousel settings={settings} slides={slides}/>
  );
}

Result

Loading...

Dynamic Width

You need to add slidesPerView: 'auto' to the settings to have auto width style in carousel.

Live Editor

function Example() {
  const settings = {
        slidesPerView: 'auto',
        spaceBetween: 30,
        hasNavigation: true,
        hasPagination: true
      };
      const slides = [
      <Banner title="One" description="Some long text content to get more space for carousel auto width style example" />,
      <Banner title="Two" description="Banner description" />,
      <Banner title="Three" description="Banner description with some more text which gets more space" />,
      <Banner title="Four" description="Some long text content to get more space for carousel auto width style example" />,
      <Banner title="Five" description="Banner description with more text" />,
      <Banner title="Six" description="Some long text content to get more space for carousel auto width style example" />
      ];

  return (
    <Carousel settings={settings} slides={slides}/>
  );
}

Result

Loading...

Infinite Loop

The Carousel infinite loop mode can be activated by adding loop: true in settings.

Live Editor

function Example() {
  const settings = {
        loop: true
      };
      const slides = [
        <Banner title="One" description="Banner description" />,
        <Banner title="Two" description="Banner description" />,
        <Banner title="Three" description="Banner description" />,
        <Banner title="Four" description="Banner description" />,
        <Banner title="Five" description="Banner description" />,
        <Banner title="Six" description="Banner description" />
      ];

  return (
    <Carousel settings={settings} slides={slides}/>
  );
}

Result

Loading...

Infinite Loop with slides per group

The Carousel infinite loop with slides per group can be customized using slidesPerGroup and loopFillGroupWithBlank in settings.

Live Editor

function Example() {
  const settings = {
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 16,
        loop: true,
        loopFillGroupWithBlank: true
      };
      const slides = [
        <Banner title="One" description="Banner description" />,
        <Banner title="Two" description="Banner description" />,
        <Banner title="Three" description="Banner description" />,
        <Banner title="Four" description="Banner description" />,
        <Banner title="Five" description="Banner description" />,
        <Banner title="Six" description="Banner description" />
      ];

  return (
    <Carousel settings={settings} slides={slides}/>
  );
}

Result

Loading...

Multi Slides

The Carousel can be multi slides by adding slidesPerView in settings.

Live Editor

function Example() {
  const settings = {
        slidesPerView: 3,
        spaceBetween: 16,
        hasNavigation: true,
        hasPagination: true
      };
      const slides = [
        <Banner title="One" description="Banner description" />,
        <Banner title="Two" description="Banner description" />,
        <Banner title="Three" description="Banner description" />,
        <Banner title="Four" description="Banner description" />,
        <Banner title="Five" description="Banner description" />,
        <Banner title="Six" description="Banner description" />
      ];

  return (
    <Carousel settings={settings} slides={slides}/>
  );
}

Result

Loading...

Navigation

Carousel navigation is optional and can be controlled with hasNavigation prop.

Live Editor

function Example() {
  const settings = {
        hasNavigation: false
      };
      const slides = [
        <Banner title="One" description="Banner description" />,
        <Banner title="Two" description="Banner description" />,
        <Banner title="Three" description="Banner description" />
      ];

  return (
    <Carousel settings={settings} slides={slides}/>
  );
}

Result

Loading...

Pagination

Carousel pagination is optional and can be controlled with hasPagination prop.

Live Editor

function Example() {
  const settings = {
        hasPagination: false
      };
      const slides = [
        <Banner title="One" description="Banner description" />,
        <Banner title="Two" description="Banner description" />,
        <Banner title="Three" description="Banner description" />
      ];

  return (
    <Carousel settings={settings} slides={slides}/>
  );
}

Result

Loading...

Props

Name	Type	Default
slides * The slides array	ReactNode[]	—
settings The carousel settings	SettingsType	"{ spaceBetween: 16 }"
onSlideChange Event will be fired when currently active slide is changed	((swiper: Swiper) => void)	—
onReachBeginning Event will be fired when Carousel reaches its beginning (initial position)	((swiper: Swiper) => void)	—
onReachEnd Event will be fired when Carousel reaches last slide	((swiper: Swiper) => void)	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.