Galeri Bootstrap 5

Carousel/Slайдер

Carousel (slайдер) adalah tampilan yang digunakan untuk melooping elemen-elemen untuk penjelajahan:

Bagaimana Membuat Carousel?

Contoh berikut menunjukkan bagaimana membuat carousel dasar dengan indikator dan kontrol:

Example

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Indikator/Titik -->
  <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>
  <!-- Slайдer/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>
  <!-- Kontrol Kiri/Kanan/ikon -->
  <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>

Try It Yourself

Example Explanation

Description of the effect of each class in the above example:

Class Description
.carousel Create a carousel.
.carousel-indicators Add indicators to the carousel. They are the small dots at the bottom of each slide.
Indicates how many slides are in the carousel and which slide the user is currently viewing.
.carousel-inner Add slides to the carousel.
.carousel-item Specify the content of each slide.
.carousel-control-prev Add a left (previous) button to the carousel, allowing users to backtrack between slides.
.carousel-control-next Add a right (next) button to the carousel, allowing users to navigate between slides.
.carousel-control-prev-icon Used with .carousel-control-prev to create a 'Previous' button.
.carousel-control-next-icon Used with .carousel-control-next to create a 'Next' button.
.slide Add CSS transitions and animation effects when sliding from one project to the next.
If you do not want this effect, please delete this class.

Add a title for the slide

Please add a title to each <div class="carousel-item"> Inside <div class="carousel-caption"> Add elements inside to create a title for each slide:

Example

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

Try It Yourself