logo

eola Style Guide 2024: Carousel

Carousel

Carousel is a component used clicking through slides

Examples

Basic

<Flex maxWidth={1000}>
  <Carousel>
    {dumyData.map(number => (
      <CarouselSlide key={number} style={style}>
        SLIDE {number}
      </CarouselSlide>
    ))}
  </Carousel>
</Flex>

Custom settings

<Flex maxWidth={1000}>
  <Carousel settings={{ autoplay: false, slidesPerView: 4 }}>
    {dumyData.map(number => (
      <CarouselSlide key={number} style={style}>
        SLIDE {number}
      </CarouselSlide>
    ))}
  </Carousel>
</Flex>

With navigation

<Flex maxWidth={1000}>
  <Carousel settings={{ autoplay: false }}>
    <CarouselSlot slot="container-start">
      <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
        <h2>Title</h2>
        <CarouselNavigation />
      </div>
    </CarouselSlot>
    {dumyData.map(number => (
      <CarouselSlide key={number} style={style}>
        SLIDE {number}
      </CarouselSlide>
    ))}
  </Carousel>
</Flex>