Carousel: Vertical

Ready

HTML
View
Info
Notes


        
        <div class="carousel h-96 carousel-vertical rounded-box" items="[object Object] [object Object] [object Object] [object Object] [object Object]">

    <div class="carousel-item h-full"> <img src="https://picsum.photos/id/301/400/300" alt="" /></div>
    <div class="carousel-item h-full"> <img src="https://picsum.photos/id/302/400/300" alt="" /></div>
    <div class="carousel-item h-full"> <img src="https://picsum.photos/id/308/400/300" alt="" /></div>
    <div class="carousel-item h-full"> <img src="https://picsum.photos/id/304/400/300" alt="" /></div>
    <div class="carousel-item h-full"> <img src="https://picsum.photos/id/305/400/300" alt="" /></div>

</div>


        @!jrmc.carousel({ items: [
  { url: 'https://picsum.photos/id/301/400/300', class: 'h-full' },
  { url: 'https://picsum.photos/id/302/400/300', class: 'h-full' },
  { url: 'https://picsum.photos/id/308/400/300', class: 'h-full' },
  { url: 'https://picsum.photos/id/304/400/300', class: 'h-full' },
  { url: 'https://picsum.photos/id/305/400/300', class: 'h-full' },
], class: 'h-96 carousel-vertical rounded-box' })

Handle: @carousel--vertical
Variants (9): Default , Snap To Center , Snap To End , With Full Width Items , Vertical , With Half Width Items , Full Bleed , With Indicator Button , With Next Prev Buttons
Preview:
- With layout
- Component only
Filesystem Path: fractal/components/02-display/carousel/05-carousel--vertical.edge

Carousel

Doc : daisyui carousel

Carousel show images or content in a scrollable area.

Class name	Type
carousel	Component	Container element
carousel-item	Component	Carousel item
carousel-center	Modifier	Snap elements to center
carousel-end	Modifier	Snap elements to end
carousel-vertical	Responsive	Vertical carousel