Bootstrap 5 Carousel

Carousel / Diasshow

Carousel (diasshow) bruges til at gennemse elementer i en cirkulær rækkefølge:

Sådan oprettes en carousel

Her er et eksempel på, hvordan man opretter en grundlæggende diasshow med indikatorer og kontroller:

Eksempel

<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- 指标/点 -->
  <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>
  <!-- 幻灯片/轮播 -->
  <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>
  <!-- 左右控件/图标 -->
  <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>

Prøv det selv

Eksempel Forklaring

Beskrivelse af virkningen af hver klasse i det foregående eksempel:

Klasser Beskrivelse
.carousel Opret en rullemenu.
.carousel-indicators Tilføj indikatorer til rullemenuen. Det er små punkter på bunden af hver side.
Angiver, hvor mange diasshowside der er i rullemenuen, samt hvilken side brugeren aktuelt ser.
.carousel-inner Tilføj diasshowet til rullemenuen.
.carousel-item Definer indholdet for hver diasshowside.
.carousel-control-prev Tilføj en venstre (forrige)-knap til rullemenuen, så brugeren kan navigere tilbage mellem diasshowene.
.carousel-control-next Tilføj en højre (næste)-knap til rullemenuen, så brugeren kan navigere mellem diasshowene.
.carousel-control-prev-icon Brug sammen med .carousel-control-prev for at oprette en 'forrige'-knap.
.carousel-control-next-icon Brug sammen med .carousel-control-next for at oprette en 'næste'-knap.
.slide Tilføj CSS-overgange og animationseffekter, når man skifter fra et projekt til det næste.
Hvis du ikke ønsker denne effekt, skal du slette denne klasse.

Tilføj titel til diasshowet

Tilføj titler til hver <div class="carousel-item"> Indenfor <div class="carousel-caption"> Tilføj elementer, opret titler for hver diasshowside:

Eksempel

<div class="carousel-item">
  <img src="beijing.jpg" alt="Beijing">
  <div class="carousel-caption">
    <h3>Beijing</h3>
    <p>Tak, Beijing!</p>
  </div>
</div>

Prøv det selv