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 rounded" alt="...">    </div>    <div class="carousel-item">      <img src="..." class="d-block w-100 rounded" alt="...">    </div>    <div class="carousel-item">      <img src="..." class="d-block w-100 rounded" 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">    <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="/demo9/images/slides/slide-a.jpg" class="d-block w-100 rounded" alt="carousel">        </div>        <div class="carousel-item">            <img src="/demo9/images/slides/slide-b.jpg" class="d-block w-100 rounded" alt="carousel">        </div>        <div class="carousel-item">            <img src="/demo9/images/slides/slide-c.jpg" class="d-block w-100 rounded" 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">    <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="/demo9/images/slides/slide-a.jpg" class="d-block w-100 rounded" 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="/demo9/images/slides/slide-b.jpg" class="d-block w-100 rounded" 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="/demo9/images/slides/slide-c.jpg" class="d-block w-100 rounded" 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="/demo9/images/slides/slide-a.jpg" class="d-block w-100 rounded" alt="carousel">        </div>        <div class="carousel-item">            <img src="/demo9/images/slides/slide-b.jpg" class="d-block w-100 rounded" alt="carousel">        </div>        <div class="carousel-item">            <img src="/demo9/images/slides/slide-c.jpg" class="d-block w-100 rounded" 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
Bordered
Sidebar Style
White
Dark
Theme
Primary Skin
Default
Blue Light
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?