Carousel: With Full Width Items

Ready

HTML
View
Info
Notes


        
        <div class="carousel w-64 rounded-box">
    <div class="carousel-item w-full"> <img src="https://picsum.photos/id/400/256/400" class="w-full" alt="" /></div>
    <div class="carousel-item w-full"> <img src="https://picsum.photos/id/401/256/400" class="w-full" alt="" /></div>
    <div class="carousel-item w-full"> <img src="https://picsum.photos/id/402/256/400" class="w-full" alt="" /></div>
</div>


        @jrmc.carousel({ class: 'w-64 rounded-box' })
  @jrmc.carousel.item({ class: 'w-full' })
    <img src="https://picsum.photos/id/400/256/400" class="w-full" alt="" />
  @end
  @jrmc.carousel.item({ class: 'w-full' })
    <img src="https://picsum.photos/id/401/256/400" class="w-full" alt="" />
  @end
  @jrmc.carousel.item({ class: 'w-full' })
    <img src="https://picsum.photos/id/402/256/400" class="w-full" alt="" />
  @end
@end

Handle: @carousel--with-full-width-items
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/04-carousel--with-full-width-items.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