Carousel: Full Bleed

Ready

HTML
View
Info
Notes


        
        <div class="carousel carousel-center max-w-md p-4 space-x-4 bg-neutral rounded-box">
    <div class="carousel-item"> <img src="https://picsum.photos/id/400/250/180" class="rounded-box" alt="" /></div>
    <div class="carousel-item"> <img src="https://picsum.photos/id/401/250/180" class="rounded-box" alt="" /></div>
    <div class="carousel-item"> <img src="https://picsum.photos/id/402/250/180" class="rounded-box" alt="" /></div>
    <div class="carousel-item"> <img src="https://picsum.photos/id/403/250/180" class="rounded-box" alt="" /></div>
</div>


        @jrmc.carousel({ class: 'carousel-center max-w-md p-4 space-x-4 bg-neutral rounded-box' })
  @jrmc.carousel.item()
    <img src="https://picsum.photos/id/400/250/180" class="rounded-box" alt="" />
  @end
  @jrmc.carousel.item()
    <img src="https://picsum.photos/id/401/250/180" class="rounded-box" alt="" />
  @end
  @jrmc.carousel.item()
    <img src="https://picsum.photos/id/402/250/180" class="rounded-box" alt="" />
  @end
  @jrmc.carousel.item()
    <img src="https://picsum.photos/id/403/250/180" class="rounded-box" alt="" />
  @end
@end

Handle: @carousel--full-bleed
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/07-carousel--full-bleed.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