.carousel
, .d-block
and .img-fluid
on carousel images to prevent browser default image alignment. The Bootstrap 4 .carousel
and .slide
to an outer container (with its own ID).
For the scrollable contents, wrap all items in a .carousel-inner
and give each item a .carousel-item
class.
To add "Previous/Next
" controls, use an <a>
with .carousel-control-prev
or .carousel-control-next
. Also add a <span>
with .carousel-control-prev-icon
or .carousel-control-next-icon
.
<div id="carouselControl" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/content/images-4.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/content/images-4.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/content/images-4.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselControl" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControl" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
To add "indicator" controls, add a list with .carousel-indicators
, as well as the applicable .data-target
and .data-slide-to attributes
.
<div id="CarouselIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#CarouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#CarouselIndicators" data-slide-to="1"></li>
<li data-target="#CarouselIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/content/images-4.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/content/images-4.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/content/images-4.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#CarouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#CarouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Add captions to your slides easily with the .carousel-caption
element within any .carousel-item
. We hide them initially with .d-none
and bring them back on medium-sized devices with .d-md-block
.
<div id="CarouselCaptions" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#CarouselCaptions" data-slide-to="0" class="active"></li>
<li data-target="#CarouselCaptions" data-slide-to="1"></li>
<li data-target="#CarouselCaptions" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../images/content/images-4.jpg" class="d-block w-100" alt="First Slider">
<div class="carousel-caption d-none d-md-block">
<h3>First Slider</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="carousel-item">
<img src="../images/content/images-4.jpg" class="d-block w-100" alt="Second Slider">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slider</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="carousel-item">
<img src="../images/content/images-4.jpg" class="d-block w-100" alt="Third Slider">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slider</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#CarouselCaptions" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#CarouselCaptions" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>