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

    <div class="carousel slide theme-slider text-center" 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-chevron-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-chevron-right"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>
    </div>

##### With Captions

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

    <div class="carousel slide" 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" data-bs-theme="light">
        <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>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
        </div>
        <div class="carousel-item"><img class="d-block w-100" src="../../../assets/img/chat/8.jpg" alt="Second slide" />
          <div class="carousel-caption d-none d-md-block">
            <h5 class="text-white">Second Slide Heading</h5>
            <p>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>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>

##### Fade Example

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

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize