A slideshow component for cycling
through elements—images or slides of
The carousel is a slideshow for cycling through a
series of content, built with CSS 3D transforms
images, text, or custom mark-up. It also includes
support for previous/next controls and indicators.
How To Create a Carousel
.carousel Creates a carousel
.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of
each slide (which indicates how many slides there are in the carousel,
and which slide the user are currently viewing)
.carousel-inner Adds slides to the carousel
.carousel-item Specifies the content of each slide
.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go
back between the slides
.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go
forward between the slides
Used together with .carousel-control-prev to create a "previous" button
Used together with .carousel-control-next to create a "next" button
.slide Adds a CSS transition and animation effect when sliding from one item to
the next. Remove this class if you do not want this effect
The Carousel Plugin
The Carousel plugin is a component for cycling
through elements, like a carousel (slideshow).
Tip: Plugins can be included individually (using
Bootstrap's individual "carousel.js" file), or all at
once (using "bootstrap.js" or "bootstrap.min.js").
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.
1. Create a HTML div element with class ‘carousel’. If you want to
slideshow the images automatically then also add a class ‘slide’ to it.
2. Give an id “carouselExampleControls” to the div element to control the
slideshow with buttons.
4. Inside the div create another nested div with class “carousel-inner”.
This div is going to contain all the carousel elements except the
buttons used to control the carousel.
5. 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.
6. Add the “carousel-control-prev” and the “carousel-control-next” class
to the previous and next slide links respectively.
7. Add the “data-slide” attributes as ‘prev’ and ‘next’ for the previous and
next icons of the carousel.
to change Bootstrap Carousel
Interval at Runtime ?
// Handle Bootstrap carousel slide event
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<a class="carousel-control-next" href="#demo" data-slide="next">
The span tag is just like a div, which is used to group similar
content so it can all be styled together.