Carousel: Snap To Center

Ready

HTML
View
Info
Notes


        
        <div class="carousel carousel-center rounded-box" items="[object Object] [object Object] [object Object] [object Object] [object Object]">

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

</div>


        @!jrmc.carousel({ items: [
  { url: 'https://picsum.photos/id/400/400/300' },
  { url: 'https://picsum.photos/id/401/400/300' },
  { url: 'https://picsum.photos/id/402/400/300' },
  { url: 'https://picsum.photos/id/403/400/300' },
  { url: 'https://picsum.photos/id/404/400/300' },
], class: 'carousel-center rounded-box' })

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