Bootstrap 4 Carousel
Bootstrap 4 Carousel
Bootstrap 4 offers a carousel component, which is also known as a slider or slideshow. The carousel is used for the dynamic representation of content using images with some text. It is used to represent a large amount of content by occupying less amount of space
Steps for creating a Carousel
- Add .carousel class along with the .slide class to the <div> element to create a carousel layout. The .slide class adds the CSS animation and transition effect
- Add .carousel-indicators class to the <div> element to add indicators to the carousel.
- Add .carousel-inner class to the <div> element to add slides to the carousel.
- Add .carousel-item class to the <div> element for specifying content of each element.
- Add .carousel-control-prev class to the <a> element for adding previous button to the carousel.
- Add .carousel-control-next class to the <a> element for adding next button to the carousel.
- Add .carousel-control-prev-icon class to the <span> element which is used with .carousel-control-prev class to add the previous button icon.
- Add .carousel-control-next-icon class to the <span> element which is used with .carousel-control-prev class to add the next button icon.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Carousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h2 style="text-align: center">Bootstrap 4 Carousel</h2><br>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="footer.jpg" alt="Slider1" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="slider1.png" alt="Slider2" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="onepage.jpg" alt="Slider3" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
Output
Add Captions to the Slides – Bootstrap 4 also allows you to add the text or caption to your slide.
Steps for creating Captions with the Slide
Add .carousel-caption class to the <div> element to add the caption to each slide. This class is used within the .carousel-class-item class.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Carousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h2 style="text-align: center">Bootstrap 4 Carousel with Caption</h2><br>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="footer.jpg" alt="Slider1" width="1100" height="500">
<div class="carousel-caption">
<h3>Hey there!</h3>
<p>This is the first slide</p>
</div>
</div>
<div class="carousel-item">
<img src="slider1.png" alt="Slider2" width="1100" height="500">
<div class="carousel-caption">
<h3>Hey there!</h3>
<p>This is the second slide</p>
</div>
</div>
<div class="carousel-item">
<img src="onepage.jpg" alt="Slider3" width="1100" height="500">
<div class="carousel-caption">
<h3>Hey there!</h3>
<p>This is the third slide</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
Output
Carousel using JavaScript – You can activate the carousel manually using JavaScript.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Carousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Activate Carousel with JavaScript</h2>
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ul class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slider.jpg" alt="slider1" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="slider1.png" alt="slider2" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="onepage.jpg" alt="slider3" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script>
$(document).ready(function(){
// Activate Carousel
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item1").click(function(){
$("#myCarousel").carousel(0);
});
$(".item2").click(function(){
$("#myCarousel").carousel(1);
});
$(".item3").click(function(){
$("#myCarousel").carousel(2);
});
// Enable Carousel Controls
$(".carousel-control-prev").click(function(){
$("#myCarousel").carousel("prev");
});
$(".carousel-control-next").click(function(){
$("#myCarousel").carousel("next");
});
});
</script>
</body>
</html>
Output
