ContextQMD
Back to Daisyui

Carousel

packages/docs/src/routes/(routes)/components/carousel/+page.md

5.5.1922.9 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

~Snap to start (default)

<div class="carousel rounded-box"> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> </div>
html
<div class="$$carousel rounded-box">
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
</div>

~Snap to center

<div class="carousel carousel-center rounded-box"> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> </div>
html
<div class="$$carousel $$carousel-center rounded-box">
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
</div>

~Snap to end

<div class="carousel carousel-end rounded-box"> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> </div>
html
<div class="$$carousel $$carousel-end rounded-box">
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
</div>

~Carousel with full width items

<div class="w-64 carousel rounded-box"> <div class="w-full carousel-item"> </div> <div class="w-full carousel-item"> </div> <div class="w-full carousel-item"> </div> <div class="w-full carousel-item"> </div> <div class="w-full carousel-item"> </div> <div class="w-full carousel-item"> </div> <div class="w-full carousel-item"> </div> </div>
html
<div class="$$carousel rounded-box w-64">
  <div class="$$carousel-item w-full">
    
  </div>
  <div class="$$carousel-item w-full">
    
  </div>
  <div class="$$carousel-item w-full">
    
  </div>
  <div class="$$carousel-item w-full">
    
  </div>
  <div class="$$carousel-item w-full">
    
  </div>
  <div class="$$carousel-item w-full">
    
  </div>
  <div class="$$carousel-item w-full">
    
  </div>
</div>

~Vertical carousel

<div class="h-96 carousel carousel-vertical rounded-box"> <div class="carousel-item h-full"> </div> <div class="carousel-item h-full"> </div> <div class="carousel-item h-full"> </div> <div class="carousel-item h-full"> </div> <div class="carousel-item h-full"> </div> <div class="carousel-item h-full"> </div> <div class="carousel-item h-full"> </div> </div>
html
<div class="$$carousel $$carousel-vertical rounded-box h-96">
  <div class="$$carousel-item h-full">
    
  </div>
  <div class="$$carousel-item h-full">
    
  </div>
  <div class="$$carousel-item h-full">
    
  </div>
  <div class="$$carousel-item h-full">
    
  </div>
  <div class="$$carousel-item h-full">
    
  </div>
  <div class="$$carousel-item h-full">
    
  </div>
  <div class="$$carousel-item h-full">
    
  </div>
</div>

~Carousel with half width items

<div class="w-96 carousel rounded-box"> <div class="w-1/2 carousel-item"> </div> <div class="w-1/2 carousel-item"> </div> <div class="w-1/2 carousel-item"> </div> <div class="w-1/2 carousel-item"> </div> <div class="w-1/2 carousel-item"> </div> <div class="w-1/2 carousel-item"> </div> <div class="w-1/2 carousel-item"> </div> </div>
html
<div class="$$carousel rounded-box w-96">
  <div class="$$carousel-item w-1/2">
    
  </div>
  <div class="$$carousel-item w-1/2">
    
  </div>
  <div class="$$carousel-item w-1/2">
    
  </div>
  <div class="$$carousel-item w-1/2">
    
  </div>
  <div class="$$carousel-item w-1/2">
    
  </div>
  <div class="$$carousel-item w-1/2">
    
  </div>
  <div class="$$carousel-item w-1/2">
    
  </div>
</div>

~Full-bleed carousel

<div class="max-w-md p-4 space-x-4 carousel carousel-center bg-neutral rounded-box"> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> </div>
html
<div class="$$carousel $$carousel-center bg-neutral rounded-box max-w-md space-x-4 p-4">
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
  <div class="$$carousel-item">
    
  </div>
</div>

~Carousel with indicator buttons

This slider works with anchor links so the browser will snap vertically to the image when you click buttons.

<div class="w-full carousel"> <div id="item1" class="w-full carousel-item"> </div> <div id="item2" class="w-full carousel-item"> </div> <div id="item3" class="w-full carousel-item"> </div> <div id="item4" class="w-full carousel-item"> </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="$$carousel w-full">
  <div id="item1" class="$$carousel-item w-full">
    
  </div>
  <div id="item2" class="$$carousel-item w-full">
    
  </div>
  <div id="item3" class="$$carousel-item w-full">
    
  </div>
  <div id="item4" class="$$carousel-item w-full">
    
  </div>
</div>
<div class="flex w-full justify-center gap-2 py-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

This slider works with anchor links so the browser will snap vertically to the image when you click buttons.

<div class="w-full carousel"> <div id="slide1" class="relative w-full carousel-item"> 
<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"> 
<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"> 
<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"> 
<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="$$carousel w-full">
  <div id="slide1" class="$$carousel-item relative w-full">
    
    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
      <a href="#slide4" class="$$btn $$btn-circle">❮</a>
      <a href="#slide2" class="$$btn $$btn-circle">❯</a>
    </div>
  </div>
  <div id="slide2" class="$$carousel-item relative w-full">
    
    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
      <a href="#slide1" class="$$btn $$btn-circle">❮</a>
      <a href="#slide3" class="$$btn $$btn-circle">❯</a>
    </div>
  </div>
  <div id="slide3" class="$$carousel-item relative w-full">
    
    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
      <a href="#slide2" class="$$btn $$btn-circle">❮</a>
      <a href="#slide4" class="$$btn $$btn-circle">❯</a>
    </div>
  </div>
  <div id="slide4" class="$$carousel-item relative w-full">
    
    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
      <a href="#slide3" class="$$btn $$btn-circle">❮</a>
      <a href="#slide1" class="$$btn $$btn-circle">❯</a>
    </div>
  </div>
</div>