edge-components

Carousel: With Next Prev Buttons 

<div class="carousel w-full">
    <div id="slide1" class="carousel-item relative w-full"> <img src="https://picsum.photos/id/400/800/200" class="w-full" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2"><a role="button" href="#slide4" class="btn btn-circle">
                ❮
            </a>

            <a role="button" href="#slide2" class="btn btn-circle">
                ❯
            </a>

        </div>
    </div>
    <div id="slide2" class="carousel-item relative w-full"> <img src="https://picsum.photos/id/401/800/200" class="w-full" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2"><a role="button" href="#slide1" class="btn btn-circle">
                ❮
            </a>

            <a role="button" href="#slide3" class="btn btn-circle">
                ❯
            </a>

        </div>
    </div>
    <div id="slide3" class="carousel-item relative w-full"> <img src="https://picsum.photos/id/402/800/200" class="w-full" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2"><a role="button" href="#slide2" class="btn btn-circle">
                ❮
            </a>

            <a role="button" href="#slide4" class="btn btn-circle">
                ❯
            </a>

        </div>
    </div>
    <div id="slide4" class="carousel-item relative w-full"> <img src="https://picsum.photos/id/403/800/200" class="w-full" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2"><a role="button" href="#slide3" class="btn btn-circle">
                ❮
            </a>

            <a role="button" href="#slide1" class="btn btn-circle">
                ❯
            </a>

        </div>
    </div>
</div>
 
@jrmc.carousel({ class: 'w-full' })
  @jrmc.carousel.item({ id: 'slide1', class: 'relative w-full' })
    <img src="https://picsum.photos/id/400/800/200" class="w-full" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      @!jrmc.button.link({ text: '❮', class: 'btn-circle', href: '#slide4' })
      @!jrmc.button.link({ text: '❯', class: 'btn-circle', href: '#slide2' })
    </div>
  @end
  @jrmc.carousel.item({ id: 'slide2', class: 'relative w-full' })
    <img src="https://picsum.photos/id/401/800/200" class="w-full" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      @!jrmc.button.link({ text: '❮', class: 'btn-circle', href: '#slide1' })
      @!jrmc.button.link({ text: '❯', class: 'btn-circle', href: '#slide3' })
    </div>
  @end
  @jrmc.carousel.item({ id: 'slide3', class: 'relative w-full' })
    <img src="https://picsum.photos/id/402/800/200" class="w-full" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      @!jrmc.button.link({ text: '❮', class: 'btn-circle', href: '#slide2' })
      @!jrmc.button.link({ text: '❯', class: 'btn-circle', href: '#slide4' })
    </div>
  @end
  @jrmc.carousel.item({ id: 'slide4', class: 'relative w-full' })
    <img src="https://picsum.photos/id/403/800/200" class="w-full" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      @!jrmc.button.link({ text: '❮', class: 'btn-circle', href: '#slide3' })
      @!jrmc.button.link({ text: '❯', class: 'btn-circle', href: '#slide1' })
    </div>
  @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