daisyUI Kit 🌼

Carousel

Carousel showcases content in a beautiful, scrollable container.

Burger
Burger
Burger
Burger
Burger
Burger
Burger
Code Example 
<Carousel class="rounded-box">
  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=8B7BCDC2" alt="Burger">
  </CarouselItem>

  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=500B67FB" alt="Burger">
  </CarouselItem>
</Carousel>

Components

The Carousel components include the following:

The Carousel component's styles and behavior can be customized with following props:

PropTypeDescription
snap-to
string
sets CSS scrollsnap to either of the below prop names
    center
string
sets CSS scrollsnap to center
    end
string
sets CSS scrollsnap to end
vertical
boolean
gives the carousel a vertical layout

Snap

By default, the Carousel uses css scrollsnap at the start of each image. There are two ways to change the scrollsnap:

  • The center, and end, boolean props.
  • The snap prop, which accepts a string with either of the above prop names.

Scroll snapping works for both horizontal and vertical layouts.

CarouselItem

CarouselItem componets go directly inside of Carousel and wrap images. They do not have any props.

Snap to Center

Burger
Burger
Burger
Burger
Burger
Burger
Burger
Code Example 
<Carousel center class="rounded-box h-[300px]">
  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=8B7BCDC2" alt="Burger">
  </CarouselItem>

  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=500B67FB" alt="Burger">
  </CarouselItem>

  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=9D9539E7" alt="Burger">
  </CarouselItem>
</Carousel>

Snap to End

Burger
Burger
Burger
Burger
Burger
Burger
Burger
Code Example 
<Carousel end class="rounded-box h-[300px]">
  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=8B7BCDC2" alt="Burger">
  </CarouselItem>

  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=500B67FB" alt="Burger">
  </CarouselItem>

  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=9D9539E7" alt="Burger">
  </CarouselItem>
</Carousel>

Vertical

Use the vertical prop to arrange items vertically. To become scrollable, the Carousel requires a fixed height. In the below example, the carousel and the items all have a height of 300px on large screens.

Burger
Burger
Burger
Burger
Burger
Burger
Burger
Code Example 
<Carousel vertical class="rounded-box h-[300px]">
  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=8B7BCDC2" alt="Burger">
  </CarouselItem>

  <CarouselItem>
    <img src="https://api.lorem.space/image/burger?w=400&h=300&hash=500B67FB" alt="Burger">
  </CarouselItem>
</Carousel>