logologo-dark

Carousels

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

Basic Examples

Carousels don’t automatically normalize slide dimensions. You may need to use additional utilities to appropriate function.

Code Example
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">  <div class="carousel-inner">    <div class="carousel-item active">        <img src="..." class="d-block w-100" alt="...">    </div>    <div class="carousel-item">      <img src="..." class="d-block w-100" alt="...">    </div>    <div class="carousel-item">      <img src="..." class="d-block w-100" alt="...">    </div>  </div></div>

With Controls & Indicators

You can add the indicators to the carousel, as well as the previous and next controls too.

Code Example
<div id="carouselExConInd" class="carousel slide" data-bs-ride="carousel"="carousel">    <ol class="carousel-indicators">        <li data-bs-target="#carouselExConInd" data-bs-slide-to="0" class="active"></li>        <li data-bs-target="#carouselExConInd" data-bs-slide-to="1"></li>        <li data-bs-target="#carouselExConInd" data-bs-slide-to="2"></li>    </ol>    <div class="carousel-inner">        <div class="carousel-item active">            <img src="/demo1/images/slides/slide-a.jpg" class="d-block w-100" alt="carousel">        </div>        <div class="carousel-item">            <img src="/demo1/images/slides/slide-b.jpg" class="d-block w-100" alt="carousel">        </div>        <div class="carousel-item">            <img src="/demo1/images/slides/slide-c.jpg" class="d-block w-100" alt="carousel">        </div>    </div>    <a class="carousel-control-prev" href="#carouselExConInd" role="button" data-bs-slide="prev">        <span class="carousel-control-prev-icon" aria-hidden="true"></span>        <span class="visually-hidden">Previous</span>    </a>    <a class="carousel-control-next" href="#carouselExConInd" role="button" data-bs-slide="next">        <span class="carousel-control-next-icon" aria-hidden="true"></span>        <span class="visually-hidden">Next</span>    </a></div>

With Captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

Code Example
<div id="carouselExCap" class="carousel slide" data-bs-ride="carousel"="carousel">    <ol class="carousel-indicators">        <li data-bs-target="#carouselExCap" data-bs-slide-to="0" class="active"></li>        <li data-bs-target="#carouselExCap" data-bs-slide-to="1"></li>        <li data-bs-target="#carouselExCap" data-bs-slide-to="2"></li>    </ol>    <div class="carousel-inner text-light">      <div class="carousel-item active">          <img src="/demo1/images/slides/slide-a.jpg" class="d-block w-100" alt="...">          <div class="carousel-caption d-none d-md-block">          <h5>First slide label</h5>          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>          </div>      </div>      <div class="carousel-item">          <img src="/demo1/images/slides/slide-b.jpg" class="d-block w-100" alt="...">          <div class="carousel-caption d-none d-md-block">          <h5>Second slide label</h5>          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>          </div>      </div>      <div class="carousel-item">          <img src="/demo1/images/slides/slide-c.jpg" class="d-block w-100" alt="...">          <div class="carousel-caption d-none d-md-block">          <h5>Third slide label</h5>          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>          </div>      </div>    </div>    <a class="carousel-control-prev" href="#carouselExCap" role="button" data-bs-slide="prev">        <span class="carousel-control-prev-icon" aria-hidden="true"></span>        <span class="visually-hidden">Previous</span>    </a>    <a class="carousel-control-next" href="#carouselExCap" role="button" data-bs-slide="next">        <span class="carousel-control-next-icon" aria-hidden="true"></span>        <span class="visually-hidden">Next</span>    </a></div>

Crossfade Effect

Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide.

Code Example
<div id="carouselExFade" class="carousel slide carousel-fade" data-bs-ride="carousel">    <div class="carousel-inner">        <div class="carousel-item active">            <img src="/demo1/images/slides/slide-a.jpg" class="d-block w-100" alt="carousel">        </div>        <div class="carousel-item">            <img src="/demo1/images/slides/slide-b.jpg" class="d-block w-100" alt="carousel">        </div>        <div class="carousel-item">            <img src="/demo1/images/slides/slide-c.jpg" class="d-block w-100" alt="carousel">        </div>    </div>    <a class="carousel-control-prev" href="#carouselExFade" role="button" data-bs-slide="prev">        <span class="carousel-control-prev-icon" aria-hidden="true"></span>        <span class="visually-hidden">Previous</span>    </a>    <a class="carousel-control-next" href="#carouselExFade" role="button" data-bs-slide="next">        <span class="carousel-control-next-icon" aria-hidden="true"></span>        <span class="visually-hidden">Next</span>    </a></div>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Shady
Softy
Sidebar Style
White
Light
Dark
Theme
Header Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?