Choose a bootstrap 5.x webcomponent ->

Bootstrap Component: Carousel

Carousel

Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit. The .active class needs to be added to one of the slides otherwise the carousel will not be visible. Also be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-bs-target attribute (or href for links) that matches the id of the .carousel element.

Live Preview

<!--början på karusellen-->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
  <!-- Indikatorer för att navigera mellan bilderna -->
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <!-- Innehållet i karusellen -->
    <div class="carousel-inner">
        <!-- Första bilden, aktiv som standard -->
        <div class="carousel-item active">
            <img src="https://dummyjson.com/image/200x100/28db68?text=Bild1" class="d-block w-100" alt="...">
        </div>
        <!-- Andra bilden -->
        <div class="carousel-item">
            <img src="https://dummyjson.com/image/200x100/f38c37?text=Bild2" class="d-block w-100" alt="...">
        </div>
        <!-- Tredje bilden -->
        <div class="carousel-item">
            <img src="https://dummyjson.com/image/200x100/5f34a7?text=Bild3" class="d-block w-100" alt="...">
        </div>
    </div>
    <!-- Knapp för att gå till föregående bild -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <!-- Knapp för att gå till nästa bild -->
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>