Carousel Example

With lightbox

/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg

Without lightbox

/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg
/francesco-ungaro.jpg
/the-chaffins.jpg
/nathan-gordon.jpg

How to use this multiselect

Props

Playground

Import from @filigran/ui :

Import {Carousel} from '@filigran/ui/client'


                   <Carousel>
      {[
        '/filigran-ui/francesco-ungaro.jpg',
        '/filigran-ui/the-chaffins.jpg',
        '/filigran-ui/nathan-gordon.jpg'
      ].map((img) => {
        return (
          <CarouselItem
            key={img}
            className="h-[500px]">
            <img
              src={img}
              alt={img}
            />
          </CarouselItem>
        )
      })}
    </Carousel>