Carousel

Create dynamic, responsive carousels with smooth transitions, perfect for showcasing images and content effortlessly.

For detail documentation, View Carousel on Bootstrap⟶

Basic Example

<div class="carousel slide" id="carouselExample">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="w-100 d-block" src="../assets/img/header-01.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/header-02.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/header-03.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/header-05.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/projects.jpg" alt="" />
    </div>
  </div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button><button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Indicators

<div class="carousel slide" id="carouselExampleIndicators">
  <div class="carousel-indicators"><button class="active" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-current="true" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-current="true" aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-current="true" aria-label="Slide 4"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-current="true" aria-label="Slide 5"></button></div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="w-100 d-block" src="../assets/img/header-01.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/header-02.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/header-03.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/header-05.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/projects.jpg" alt="" />
    </div>
  </div><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><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>

Autoplay

<div class="carousel slide" id="carouselExampleAutoPlaying" data-bs-ride="carousel">
  <div class="carousel-indicators"><button class="active" type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="1" aria-current="true" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="2" aria-current="true" aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="3" aria-current="true" aria-label="Slide 4"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="4" aria-current="true" aria-label="Slide 5"></button></div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="w-100 d-block" src="../assets/img/header-01.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/header-02.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/header-03.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/header-05.jpg" alt="" />
    </div>
    <div class="carousel-item">
      <img class="w-100 d-block" src="../assets/img/projects.jpg" alt="" />
    </div>
  </div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>