BS Carousel
The Carousel Plugin
The Carousel plugin is a component for cycling among components, similar to a carousel (slideshow).
Tip: You can include plugins separately (using Bootstrap’s “carousel.js” file) or all at once (using “bootstrap.js” or “bootstrap.min.js”).
Carousel Example
-----example mukavu -----
Carousels are not properly supported in Internet Explorer 9 or older (since the slide effect is achieved using CSS3 transitions and animations).
How To Create a Carousel
The following example demonstrates how to make a basic carousel.
Example
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="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" alt="Los Angeles" title="Bs Carousel 1" data-lazy-src="la.jpg"><noscript><img decoding="async" src="la.jpg" alt="Los Angeles" title="Bs Carousel 1"></noscript>
</div>
<div class="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" alt="Chicago" title="Bs Carousel 2" data-lazy-src="chicago.jpg"><noscript><img decoding="async" src="chicago.jpg" alt="Chicago" title="Bs Carousel 2"></noscript>
</div>
<div class="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" alt="New York" title="Bs Carousel 3" data-lazy-src="ny.jpg"><noscript><img decoding="async" src="ny.jpg" alt="New York" title="Bs Carousel 3"></noscript>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Example explained
The outermost <div>:
Carousel controls must be assigned an id (in this case, id=”myCarousel“) in order to function properly.
The class=”carousel” indicates that this <div> has a carousel.
The .slide class provides a CSS transition and animation effect, causing the items to move as a new item is displayed. If you do not want this effect, omit this class.
The data-ride=”carousel” element instructs Bootstrap to start animating the carousel instantly upon page load.
The “Indicators” part:
The indicators are the small dots at the bottom of each slide (which show the number of slides in the carousel and the slide the user is now seeing).
The indications are stated in an ordered list with class .carousel-indicators.
The data-target attribute points to the carousel’s id.
When you click on a given dot, the data-slide-to attribute determines the slide you will be taken to.
The “Wrapper for slides” part:
The slides are defined in a <div> with class.carousel-inner.
The content of each slide is defined in a <div> with class .item. This could be text or an image.
One of the slides must have the .active class applied. Otherwise, the carousel won’t be visible.
The “Left and right controls” part:
This code adds “left” and “right” buttons, which allow the user to manually navigate between slides.
The data-slide attribute takes the keywords “prev” or “next“, which change the slide’s location relative to the current position.
Add Captions to Slides
To generate a caption for each slide, place a <div class=”carousel-caption”> within each <div class=”item”>.
Example
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="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" alt="Chania" title="Bs Carousel 4" data-lazy-src="la.jpg"><noscript><img decoding="async" src="la.jpg" alt="Chania" title="Bs Carousel 4"></noscript>
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="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" alt="Chicago" title="Bs Carousel 2" data-lazy-src="chicago.jpg"><noscript><img decoding="async" src="chicago.jpg" alt="Chicago" title="Bs Carousel 2"></noscript>
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="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" alt="New York" title="Bs Carousel 3" data-lazy-src="ny.jpg"><noscript><img decoding="async" src="ny.jpg" alt="New York" title="Bs Carousel 3"></noscript>
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
