edge-components

Carousel: With Half Width Items 

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

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