## 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>

##### First Slide Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit.

##### Second Slide Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit.

##### Third Slide Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit

#### 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>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize