edge-components

Carousel: With Indicator Button 

<div>
    <div class="carousel w-full">
        <div id="item1" class="carousel-item w-full"> <img src="https://picsum.photos/id/400/800/200" class="w-full" alt="" /></div>
        <div id="item2" class="carousel-item w-full"> <img src="https://picsum.photos/id/401/800/200" class="w-full" alt="" /></div>
        <div id="item3" class="carousel-item w-full"> <img src="https://picsum.photos/id/402/800/200" class="w-full" alt="" /></div>
        <div id="item4" class="carousel-item w-full"> <img src="https://picsum.photos/id/403/800/200" class="w-full" alt="" /></div>
    </div>

    <div class="flex justify-center w-full py-2 gap-2"><a role="button" href="#item1" class="btn btn-xs">
            1
        </a>

        <a role="button" href="#item2" class="btn btn-xs">
            2
        </a>

        <a role="button" href="#item3" class="btn btn-xs">
            3
        </a>

        <a role="button" href="#item4" class="btn btn-xs">
            4
        </a>

    </div>
</div>
 
<div>
  @jrmc.carousel({ class: 'w-full' })
    @jrmc.carousel.item({ id: 'item1', class: 'w-full' })
      <img src="https://picsum.photos/id/400/800/200" class="w-full" alt="" />
    @end
    @jrmc.carousel.item({ id: 'item2', class: 'w-full' })
      <img src="https://picsum.photos/id/401/800/200" class="w-full" alt="" />
    @end
    @jrmc.carousel.item({ id: 'item3', class: 'w-full' })
      <img src="https://picsum.photos/id/402/800/200" class="w-full" alt="" />
    @end
    @jrmc.carousel.item({ id: 'item4', class: 'w-full' })
      <img src="https://picsum.photos/id/403/800/200" class="w-full" alt="" />
    @end
  @end

  <div class="flex justify-center w-full py-2 gap-2">
    @!jrmc.button.link({ text: '1', class: 'btn-xs', href: '#item1' })
    @!jrmc.button.link({ text: '2', class: 'btn-xs', href: '#item2' })
    @!jrmc.button.link({ text: '3', class: 'btn-xs', href: '#item3' })
    @!jrmc.button.link({ text: '4', class: 'btn-xs', href: '#item4' })
  </div>
</div>

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