Components
Carousel

Carousel

@!jrmc.carousel({ items: [
  { url: 'https://picsum.photos/id/400/400/300', alt: 'text alt' },
  { 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' },
] })

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

<div alt="text alt" class="carousel-item">    <img src="https://picsum.photos/id/400/400/300" alt="text 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>

Carousel snap to center

@!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' })

<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>

Carousel snap to end

@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' })
  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/405/256/400' })
  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/406/256/400' })
@end

<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  class="carousel-item">    <img src="https://picsum.photos/id/405/256/400" alt="" /></div>
<div  class="carousel-item">    <img src="https://picsum.photos/id/406/256/400" alt="" /></div>
</div>

Carousel with full width items

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

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

Carousel vertical

@!jrmc.carousel({ items: [
  { url: 'https://picsum.photos/id/301/400/300', class: 'h-full' },
  { url: 'https://picsum.photos/id/302/400/300', class: 'h-full' },
  { url: 'https://picsum.photos/id/308/400/300', class: 'h-full' },
  { url: 'https://picsum.photos/id/304/400/300', class: 'h-full' },
  { url: 'https://picsum.photos/id/305/400/300', class: 'h-full' },
], class: 'h-96 carousel-vertical rounded-box' })

<div class="carousel h-96 carousel-vertical rounded-box" items="[object Object] [object Object] [object Object] [object Object] [object Object]">

<div  class="carousel-item h-full">    <img src="https://picsum.photos/id/301/400/300" alt="" /></div>
<div  class="carousel-item h-full">    <img src="https://picsum.photos/id/302/400/300" alt="" /></div>
<div  class="carousel-item h-full">    <img src="https://picsum.photos/id/308/400/300" alt="" /></div>
<div  class="carousel-item h-full">    <img src="https://picsum.photos/id/304/400/300" alt="" /></div>
<div  class="carousel-item h-full">    <img src="https://picsum.photos/id/305/400/300" alt="" /></div>

</div>

Carousel with half width items

@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

<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>

Carousel full bleed

@jrmc.carousel({ class: 'carousel-center max-w-md p-4 space-x-4 bg-neutral rounded-box' })
  @jrmc.carousel.item()
    <img src="https://picsum.photos/id/400/250/180" class="rounded-box" alt="" />
  @end
  @jrmc.carousel.item()
    <img src="https://picsum.photos/id/401/250/180" class="rounded-box" alt="" />
  @end
  @jrmc.carousel.item()
    <img src="https://picsum.photos/id/402/250/180" class="rounded-box" alt="" />
  @end
  @jrmc.carousel.item()
    <img src="https://picsum.photos/id/403/250/180" class="rounded-box" alt="" />
  @end
@end

<div class="carousel carousel-center max-w-md p-4 space-x-4 bg-neutral rounded-box" >
    <div  class="carousel-item">        <img src="https://picsum.photos/id/400/250/180" class="rounded-box" alt="" /></div><div  class="carousel-item">        <img src="https://picsum.photos/id/401/250/180" class="rounded-box" alt="" /></div><div  class="carousel-item">        <img src="https://picsum.photos/id/402/250/180" class="rounded-box" alt="" /></div><div  class="carousel-item">        <img src="https://picsum.photos/id/403/250/180" class="rounded-box" alt="" /></div>
</div>

Carousel with indicator button

1 2 3 4

@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 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>

Carousel with next prev buttons

❮ ❯

@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

<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>

# Carousel

# Carousel snap to center

# Carousel snap to end

# Carousel with full width items

# Carousel vertical

# Carousel with half width items

# Carousel full bleed

# Carousel with indicator button

# Carousel with next prev buttons

Carousel

Carousel snap to center

Carousel snap to end

Carousel with full width items

Carousel vertical

Carousel with half width items

Carousel full bleed

Carousel with indicator button

Carousel with next prev buttons