Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Carousel on Bootstrap

Basic Example

<div class="carousel slide carousel-fade" id="carouselExampleControls" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button class="active" type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img class="d-block w-100" src="../../../assets/img/generic/6.jpg" alt="First slide" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../../../assets/img/generic/7.jpg" alt="Second slide" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../../../assets/img/generic/8.jpg" alt="Third slide" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Styled Example

<div class="carousel slide theme-slider text-center carousel-fade" id="controlStyledExample" data-ride="carousel">
  <div class="carousel-indicators">
    <button class="active" type="button" data-bs-target="#controlStyledExample" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#controlStyledExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#controlStyledExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img class="d-block w-100" src="../../../assets/img/generic/6.jpg" alt="First slide" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../../../assets/img/generic/7.jpg" alt="Second slide" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../../../assets/img/generic/8.jpg" alt="Third slide" />
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#controlStyledExample" data-bs-slide="prev">
      <span class="fas fa-angle-left"></span>
      <span class="sr-only">Previous</span></button>
    <button class="carousel-control-next" type="button" data-bs-target="#controlStyledExample" data-bs-slide="next">
      <span class="fas fa-angle-right"></span>
      <span class="sr-only">Next</span>
    </button>
  </div>
</div>

With Captions

<div class="carousel slide carousel-fade" id="carouselExampleCaptions" data-ride="carousel">
  <div class="carousel-indicators">
    <button class="active" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner rounded-1">
    <div class="carousel-item active">
      <img class="d-block w-100" src="../../../assets/img/generic/5.jpg" alt="First slide" />
      <div class="carousel-caption d-none d-md-block">
        <h5 class="text-white">First Slide Heading</h5>
        <p class="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../../../assets/img/generic/28.jpg" alt="Second slide" />
      <div class="carousel-caption d-none d-md-block">
        <h5 class="text-white">Second Slide Heading</h5>
        <p class="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../../../assets/img/generic/9.jpg" alt="Third slide" />
      <div class="carousel-caption d-none d-md-block">
        <h5 class="text-white">Third Slide Heading</h5>
        <p class="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Crossfade

<div class="carousel slide carousel-fade" id="carouselExampleFade" data-ride="carousel">
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img class="d-block w-100" src="../../../assets/img/generic/8.jpg" alt="First slide" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../../../assets/img/generic/7.jpg" alt="Second slide" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../../../assets/img/generic/6.jpg" alt="Third slide" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.18.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize