Designsystem
Tema

Carousel

Carousel viser bilder eller innhold i et skrollbart område.

Med forrige-/neste-knapper

<div class="carousel w-full">
  <div id="slide1" class="carousel-item relative w-full">
    <img
      src="https://www.ntnu.no/documents/1289651112/1308286184/DSC01013-2048x1271.jpg/5f18def1-82be-9d35-bfbb-40415cdcf45a?t=1746778141796"
      class="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="#slide2" class="btn btn-circle">❯</a>
    </div>
  </div>
  <div id="slide2" class="carousel-item relative w-full">
    <img
      src="https://www.ntnu.no/documents/1289651112/1308286184/FramSki+%283%29.jpg/90b5f70a-3452-245c-e9fb-1d3a9bd82579?t=1740062224438"
      class="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">
    <img
      src="https://www.ntnu.no/documents/1289651112/1308286184/Miktrotrening_L%C3%B8pebilder_BERR4688_web+copy.jpg/88480733-1900-f50d-85b0-e394890331d7?t=1740061770667"
      class="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="#slide1" class="btn btn-circle">❯</a>
    </div>
  </div>
</div>

Med indikatorknapper

1 2 3 
<div class="carousel w-full">
  <div id="item1" class="carousel-item w-full">
    <img
      src="https://www.ntnu.no/documents/1289651112/1308286184/DSC01013-2048x1271.jpg/5f18def1-82be-9d35-bfbb-40415cdcf45a?t=1746778141796"
      class="w-full" />
  </div>
  <div id="item2" class="carousel-item w-full">
    <img
      src="https://www.ntnu.no/documents/1289651112/1308286184/FramSki+%283%29.jpg/90b5f70a-3452-245c-e9fb-1d3a9bd82579?t=1740062224438"
      class="w-full" />
  </div>
  <div id="item3" class="carousel-item w-full">
    <img
      src="https://www.ntnu.no/documents/1289651112/1308286184/Miktrotrening_L%C3%B8pebilder_BERR4688_web+copy.jpg/88480733-1900-f50d-85b0-e394890331d7?t=1740061770667"
      class="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>
</div>