Carousel: Snap To End

Ready

HTML
View
Info
Notes


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


        @jrmc.carousel({ class: 'carousel-end rounded-box' })
  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/400/256/400'})
  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/401/256/400' })
  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/402/256/400' })
  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/403/256/400' })
  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/404/256/400' })
@end

Handle: @carousel--snap-to-end
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/03-carousel--snap-to-end.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