Bootstrap Carousel Plugin
Bootstrap Carousel Plugin
Bootstrap provides a carousel plugin that allows you to easily create image sliders or carousels. A carousel is a slideshow of images or other media content that automatically transitions from one slide to the next. Here’s an example of how to create a basic carousel with Bootstrap:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="d-block w-100" alt="..." data-lazy-src="image1.jpg"><noscript><img decoding="async" src="image1.jpg" class="d-block w-100" alt="..."></noscript>
</div>
<div class="carousel-item">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="d-block w-100" alt="..." data-lazy-src="image2.jpg"><noscript><img decoding="async" src="image2.jpg" class="d-block w-100" alt="..."></noscript>
</div>
<div class="carousel-item">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="d-block w-100" alt="..." data-lazy-src="image3.jpg"><noscript><img decoding="async" src="image3.jpg" class="d-block w-100" alt="..."></noscript>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
In this example, we have created a carousel container using the <div> tag and added the carousel class to it. We have also added an id attribute to the container (carouselExampleIndicators) to identify it later for use with the carousel indicators.
Inside the carousel container, we have added an ordered list (<ol>) with the carousel-indicators class, which creates a set of indicators that show which slide is currently displayed. We have also added a <div> with the carousel-inner class, which contains the carousel items or slides.
Each carousel item is created using a <div> with the carousel-item class. Inside each item, we have added an <img> tag with the d-block and w-100 classes to make the images fill the carousel container.
Finally, we have added two <a> tags with the carousel-control-prev and carousel-control-next classes to create the navigation arrows. These arrows allow users to manually navigate between the carousel slides.
The carousel plugin provides additional options and customization features, such as automatic slide transitions, interval timing, and pause on hover. You can also add captions, captions with buttons, and other elements to your carousel slides.