import CodeRender from '../../CodeRender'

### Snap to start (default)

<CodeRender code={`
<div class="carousel rounded-box">
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
</div>

`} />
  
```html
<div class="carousel rounded-box">
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Carousel slider" /></div>
</div>

```
### Snap to center

<CodeRender code={`
<div class="carousel carousel-center rounded-box">
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
</div>

`} />
  
```html
<div class="carousel carousel-center rounded-box">
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slider" /></div>
</div>

```
### Snap to end

<CodeRender code={`
<div class="carousel carousel-end rounded-box">
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
</div>

`} />
  
```html
<div class="carousel carousel-end rounded-box">
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
  <div class="carousel-item"><img src="/pig.jpg" alt="Tailwind CSS slide component" /></div>
</div>

```
### Carousel with full width items

<CodeRender code={`
<div class="w-64 carousel rounded-box">
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
</div>

`} />
  
```html
<div class="w-64 carousel rounded-box">
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
  <div class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS carousel component" />
  </div>
</div>

```
### Vertical carousel

<CodeRender code={`
<div class="h-96 carousel carousel-vertical rounded-box">
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
</div>

`} />
  
```html
<div class="h-96 carousel carousel-vertical rounded-box">
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
  <div class="carousel-item h-full"><img src="/pig.jpg" alt="Free Tailwind CSS Slider" /></div>
</div>

```
### Carousel with half width items

<CodeRender code={`
<div class="w-96 carousel rounded-box">
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
</div>

`} />
  
```html
<div class="w-96 carousel rounded-box">
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
  <div class="w-1/2 carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide plugin" />
  </div>
</div>

```
### Full-bleed carousel

<CodeRender code={`
<div class="max-w-md p-4 space-x-4 carousel carousel-center bg-neutral rounded-box">
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
</div>

`} />
  
```html
<div class="max-w-md p-4 space-x-4 carousel carousel-center bg-neutral rounded-box">
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
  <div class="carousel-item">
    <img src="/pig.jpg" class="rounded-box" alt="Tailwind CSS component" />
  </div>
</div>

```
### Carousel with indicator buttons

<CodeRender code={`
<div class="w-full carousel">
  <div id="item1" class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS gallery" />
  </div>
  <div id="item2" class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS gallery" />
  </div>
  <div id="item3" class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS gallery" />
  </div>
  <div id="item4" class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS gallery" />
  </div>
</div>
<div class="flex justify-center w-full py-2 gap-2">
  <a href="#item1" class="btn btn-xs">1</a>
  <a href="#item2" class="btn btn-xs">2</a>
  <a href="#item3" class="btn btn-xs">3</a>
  <a href="#item4" class="btn btn-xs">4</a>
</div>

`} />
  
```html
<div class="w-full carousel">
  <div id="item1" class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS gallery" />
  </div>
  <div id="item2" class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS gallery" />
  </div>
  <div id="item3" class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS gallery" />
  </div>
  <div id="item4" class="w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS gallery" />
  </div>
</div>
<div class="flex justify-center w-full py-2 gap-2">
  <a href="#item1" class="btn btn-xs">1</a>
  <a href="#item2" class="btn btn-xs">2</a>
  <a href="#item3" class="btn btn-xs">3</a>
  <a href="#item4" class="btn btn-xs">4</a>
</div>

```
### Carousel with next/prev buttons

<CodeRender code={`
<div class="w-full carousel">
  <div id="slide1" class="relative w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide example" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      <a href="#slide4" class="btn btn-circle">❮</a>
      <a href="#slide2" class="btn btn-circle">❯</a>
    </div>
  </div>
  <div id="slide2" class="relative w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide example" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      <a href="#slide1" class="btn btn-circle">❮</a>
      <a href="#slide3" class="btn btn-circle">❯</a>
    </div>
  </div>
  <div id="slide3" class="relative w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide example" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      <a href="#slide2" class="btn btn-circle">❮</a>
      <a href="#slide4" class="btn btn-circle">❯</a>
    </div>
  </div>
  <div id="slide4" class="relative w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide example" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      <a href="#slide3" class="btn btn-circle">❮</a>
      <a href="#slide1" class="btn btn-circle">❯</a>
    </div>
  </div>
</div>

`} />
  
```html
<div class="w-full carousel">
  <div id="slide1" class="relative w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide example" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      <a href="#slide4" class="btn btn-circle">❮</a>
      <a href="#slide2" class="btn btn-circle">❯</a>
    </div>
  </div>
  <div id="slide2" class="relative w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide example" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      <a href="#slide1" class="btn btn-circle">❮</a>
      <a href="#slide3" class="btn btn-circle">❯</a>
    </div>
  </div>
  <div id="slide3" class="relative w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide example" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      <a href="#slide2" class="btn btn-circle">❮</a>
      <a href="#slide4" class="btn btn-circle">❯</a>
    </div>
  </div>
  <div id="slide4" class="relative w-full carousel-item">
    <img src="/pig.jpg" class="w-full" alt="Tailwind CSS slide example" />
    <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
      <a href="#slide3" class="btn btn-circle">❮</a>
      <a href="#slide1" class="btn btn-circle">❯</a>
    </div>
  </div>
</div>

```   

    