Bootstrap Carousel is one of the best ways to display large content in a small space and displays the slideshow of text/images.
Here, Carousel plug presents the images/text and gives accessibility to the user in a cyclic process.
Note: Internet Explorer 9 and earlier versions does not support Carousels properly (as they use CSS3 animations and transitions to achieve the slide effect).
In the below example, the classes, indicators, wrappers and controls are used which means:
id="myCarousel" : checks whether the controls are functioning properly.
class="carousel" : indicates that div has a carousel. The class .slide is used for animation, CSS transitions and to make the images/text slide while showing.
Attributedata-ride="carousel" : starts animation when the page loads.
Indicators : These are the small dots found at the bottom of every slide which denotes the number of slides in carousel including the current slide. These indicators are done with the class .carousel-indicators.
Attribute data-target : points to the carousel id.
Attribute data-slide-to : gives instruction about which slide to go when a specific dot is clicked.
Wrappers : The slides are enclosed in wrappers.
The <div> element will have a class .carousel-inner which has the slides in it.
The images or the text within the slide is specified using the class .item in <div>.
To make a slide active, the class .active has to be used. This is must in a carousel because if no slide is made active, the carousel will not be visible.