Karusellen är ett bildspel för att cykla genom element:
Följande exempel visar hur du skapar en grundläggande karusell med indikatorer och kontroller:
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block w-100">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Prova själv →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<div class="container-fluid mt-3">
<h3>Carousel Example</h3>
<p>The following example shows how to create a basic carousel with indicators and controls.</p>
</div>
</body>
</html>
En beskrivning av vad varje klass från exemplet ovan gör:
.carousel
Skapar en karusell
.carousel-indicators
Lägger till indikatorer för karusellen. Det här är de små prickarna längst ner på varje bild (som anger hur många bilder det finns i karusellen och vilken bild användaren tittar på just nu)
.carousel-inner
Lägger till bilder i karusellen
.carousel-item
Anger innehållet i varje bild
.carousel-control-prev
Lägger till en vänster (föregående) knapp till karusellen, vilket gör att användaren kan gå tillbaka mellan bilderna
.carousel-control-next
Lägger till en högerknapp (nästa) i karusellen, vilket gör att användaren kan gå framåt mellan bilderna
.carousel-control-prev-icon
Används tillsammans med .carousel-control-prev för att skapa en "föregående"-knapp
.carousel-control-next-icon
Används tillsammans med .carousel-control-next för att skapa en "nästa"-knapp
.slide
Lägger till en CSS-övergångs- och animeringseffekt när du glider från ett objekt till ett annat. Ta bort den här klassen om du inte vill ha den här effekten
Lägg till element inuti <div class="carousel-caption">
inom varje <div class="carousel-item">
för att skapa en bildtext för varje bild:
<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
Prova själv →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<div class="container-fluid mt-3">
<h3>Carousel Example</h3>
<p>The following example shows how to create a basic carousel with indicators and controls.</p>
</div>
</body>
</html>