Bootstrap 4 Carousel


Basic Carousel

When there is more than one image called carousel in bootstrap, the user will show it after a while. You need to add .carousel class to use it.

Example code

<div class="carousel slide" id="demo" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./asset/carousel-image/1.jpeg" alt="first">
</div>
<div class="carousel-item">
<img src="./asset/carousel-image/2.jpeg" alt="second">
</div>
<div class="carousel-item">
<img src="./asset/carousel-image/3.jpeg" alt="third">
</div>
</div>
</div>

Carousel With Indicators

The .carousel-indicators act as indicators for the class carousel. It looks like small dots and is located at the bottom of each slide. There will be as many indicators as there are slides inside the carousel and the indicator will be highlighted when the slide is in the current view.

Example code

<div class="carousel slide" id="demoExample" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demoExample" data-slide-to="0" class="active"></li>
<li data-target="#demoExample" data-slide-to="1"></li>
<li data-target="#demoExample" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./asset/carousel-image/1.jpeg" alt="first">
</div>
<div class="carousel-item">
<img src="./asset/carousel-image/2.jpeg" alt="second">
</div>
<div class="carousel-item">
<img src="./asset/carousel-image/3.jpeg" alt="third">
</div>
</div>
</div>

Carousel With Left,Right Button

Example code

<div class="carousel slide" id="demoIcon" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./asset/carousel-image/1.jpeg" alt="first">
</div>
<div class="carousel-item">
<img src="./asset/carousel-image/2.jpeg" alt="second">
</div>
<div class="carousel-item">
<img src="./asset/carousel-image/3.jpeg" alt="third">
</div>
</div>
<a href="#demoIcon" class="carousel-control-prev " data-slide="prev">
<span class="carousel-control-prev-icon bg-dark"></span>
</a>
<a href="#demoIcon" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon bg-dark"></span>
</a>
</div>

Carousel With Captions

The .carousel-caption class adds some text or captions to each slide.

Example code

<div class="carousel slide" id="demoCaption" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./asset/carousel-image/1.jpeg" alt="first">
<div class="carousel-caption">
<h4>First Item</h4>
<p>This is example text.</p>
</div>
</div>
<div class="carousel-item">
<img src="./asset/carousel-image/2.jpeg" alt="second">
<div class="carousel-caption">
<h4>Second Item</h4>
<p>This is example text.</p>
</div>
</div>
<div class="carousel-item">
<img src="./asset/carousel-image/3.jpeg" alt="third">
<div class="carousel-caption">
<h4>Third Item</h4>
<p>This is example text.</p>
</div>
</div>
</div>
<a href="#demoCaption" class="carousel-control-prev " data-slide="prev">
<span class="carousel-control-prev-icon bg-dark"></span>
</a>
<a href="#demoCaption" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon bg-dark"></span>
</a>
</div>