Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, including the cross-browser compatibility issue.
Carousel is the slideshow component of Bootstrap that is widely used for slideshow or cycling through different elements of an HTML document, especially image containers or texts.
Bootstrap CDN links: To learn about the uses of the Bootstrap carousel, we have to include the Bootstrap and jQuery CDN library files in the HTML codes.
<!– Bootstrap CSS –> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”> <!– jQuery –> <script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” ></script> <!– Proper.js –> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script> <!– Bootstrap JavaScript –> <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
Uses: The major use of the carousel plugin is to implement a slider or a slideshow of images. The HTML div containing images can also contain text. In this section, we are going to make a slide show of images with the help of the Bootstrap carousel plugin using the following steps.
- Create an HTML div element with the class ‘carousel’. If you want to slideshow the images automatically then also add a class ‘slide’ to it.
- Give an id “carouselExampleControls” to the div element to control the slideshow with buttons.
- Add the “data-ride” attribute as “carousel” for triggering JavaScript actions.
- Inside the div create another nested div with the class “carousel-inner”. This div is going to contain all the carousel elements except the buttons used to control the carousel.
- Inside that div, create another div “carousel-item”. Add the class ‘active’ to the default carousel slide adding the image and caption of the carousel slide. Add as many carousel items as you want.
- Add the “carousel-control-prev” and the “carousel-control-next” class to the previous and next slide links respectively.
- Add the “data-slide” attributes as ‘prev’ and ‘next’ for the previous and next icons of the carousel.
Example: In this example, we will use the carousel plugin of Bootstrap.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!--Bootstrap CSS-->
<link rel="stylesheet"
href=
<!--JQUERY, Proper.js and Bootstrap Javascript-->
<script src=
</script>
<script src=
</script>
<script src=
</script>
<style>
img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="carouselExampleControls"
class="carousel slide"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src=
<div class="carousel-caption">
<h3>Red Image</h3>
<p>
Here we can include some
text for the Red Image
</p>
</div>
</div>
<div class="carousel-item">
<img src=
<div class="carousel-caption">
<h3>Blue Image</h3>
<p>
Here we can include some
text for the Blue Image
</p>
</div>
</div>
<div class="carousel-item">
<img src=
<div class="carousel-caption">
<h3>Green Image</h3>
<p>
Here we can include some
text for the Green Image
</p>
</div>
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true">
</span>
</a>
</div>
</div>
</body>
</html>
|
Output: