Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about the Bootstrap Carousel Plugin.
Bootstrap carousel is a flexible, responsive way to add a slider to your site. In addition of being responsive, the content is flexible enough to allow images, iframes, videos, or just about any content type that you might want.
Bootstrap carousel is a flexible, responsive way to add a slider to your site. In addition of being responsive, the content is flexible enough to allow images, iframes, videos, or just about any content type that you might want.
If you want to add this bootstrap plugin functionality individually, you will need carousel.js. Otherwise, as mentioned in the tutorial Bootstrap plugins overview, you can add bootstrap.js or the manified bootstrap.min.js.
Example
A simple slideshow below shows a generic component used to cycle through elements such as carousel, using Bootstrap carousel plugin. To implement carousel, you need to add the code with the markup. There is no need for data attributes, just simple class-based development.
<div id = "myCarousel" class = "carousel slide"> <!-- 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> <!-- Carousel items --> <div class = "carousel-inner"> <div class = "item active"> <img src = "/bootstrap/images/slide1.png" alt = "First slide"> </div> <div class = "item"> <img src = "/bootstrap/images/slide2.png" alt = "Second slide"> </div> <div class = "item"> <img src = "/bootstrap/images/slide3.png" alt = "Third slide"> </div> </div> <!-- Carousel nav --> <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a> <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a> </div>
Output
When the above example is executed, it will produce the following result -
Optional Captions
You can add captions to your slides easily with the .carousel-caption element within any .item. Place any optional HTML within there and it will be automatically aligned and formatted.
Example
Following example demonstrates this -
<div id = "myCarousel" class = "carousel slide"> <!-- 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> <!-- Carousel items --> <div class = "carousel-inner"> <div class = "item active"> <img src = "/bootstrap/images/slide1.png" alt = "First slide"> <div class = "carousel-caption">This Caption 1</div> </div> <div class = "item"> <img src = "/bootstrap/images/slide2.png" alt = "Second slide"> <div class = "carousel-caption">This Caption 2</div> </div> <div class = "item"> <img src = "/bootstrap/images/slide3.png" alt = "Third slide"> <div class = "carousel-caption">This Caption 3</div> </div> </div> <!-- Carousel nav --> <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a> <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>+ </div>
Output
When the above example is executed, it will produce the following result -
Usage
You can enable carousel in the following two ways -
- Making use of data attributes - Make use of data attributes to easily control the position of the carousel.
- The data-slide attribute accepts the keywords prev or next, which alters the slide position relative to its current position.
- Use the data-slide-to attribute for passing a raw slide index to the carousel, data-slide-to = "2" which shift the slide position to a specific index beginning with 0.
- Use the data-ride = "carousel" to mark a carousel as an animation starting at page load.
- Using JavaScript - Carousel can be manually called using JavaScript as shown below -
$('.carousel').carousel()
Options
There are some options that can be passed via data attributes or JavaScript. The table below lists these options -
| Option Name | Type/Default Value | Data attribute name | Description |
|---|---|---|---|
| interval | number Default − 5000 | data-interval | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
| pause | string Default − "hover" | data-pause | Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. |
| wrap | boolean Default − true | data-wrap | Whether the carousel should cycle continuously or have hard stops. |
Methods
Here is a list of useful methods that can be used with carousel plugin -
| Method | Description | Example |
|---|---|---|
| .carousel(options) | Initializes the carousel with an optional options object and starts cycling through items. | $('#identifier').carousel({ interval: 2000 }) |
| .carousel('cycle') | Cycles through the carousel items from left to right. | $('#identifier').carousel('cycle')
|
| .carousel('pause') | Stops the carousel from cycling through items. | $('#identifier')..carousel('pause')
|
| .carousel(number) | Cycles the carousel to a particular frame (0 based, similar to an array). | $('#identifier').carousel(number)
|
| .carousel('prev') | Cycles to the previous item. | $('#identifier').carousel('prev')
|
| .carousel('next') | Cycles to the next item. | $('#identifier').carousel('next') |
Example
Following example demonstrates the usage of carousel plugin methods -
<div id = "myCarousel" class = "carousel slide"> <!-- 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> <!-- Carousel items --> <div class = "carousel-inner"> <div class = "item active"> <img src = "/bootstrap/images/slide1.png" alt = "First slide"> </div> <div class = "item"> <img src = "/bootstrap/images/slide2.png" alt = "Second slide"> </div> <div class = "item"> <img src = "/bootstrap/images/slide3.png" alt = "Third slide"> </div> </div> <!-- Carousel nav --> <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a> <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a> <!-- Controls buttons --> <div style = "text-align:center;"> <input type = "button" class = "btn prev-slide" value = "Previous Slide"> <input type = "button" class = "btn next-slide" value = "Next Slide"> <input type = "button" class = "btn slide-one" value = "Slide 1"> <input type = "button" class = "btn slide-two" value = "Slide 2"> <input type = "button" class = "btn slide-three" value = "Slide 3"> </div> </div> <script> $(function() { // Cycles to the previous item $(".prev-slide").click(function() { $("#myCarousel").carousel('prev'); }); // Cycles to the next item $(".next-slide").click(function() { $("#myCarousel").carousel('next'); }); // Cycles the carousel to a particular frame $(".slide-one").click(function() { $("#myCarousel").carousel(0); }); $(".slide-two").click(function() { $("#myCarousel").carousel(1); }); $(".slide-three").click(function() { $("#myCarousel").carousel(2); }); }); </script>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Alert Plugin
Events
The following table lists the events that can be used with carousel functionality -
| Event | Description | Example |
|---|---|---|
| slide.bs.carousel | This event fires immediately when the slide instance method is invoked. | $('#identifier').on('slide.bs.carousel', function () { // do something }) |
| slid.bs.carousel | This event is fired when the carousel has completed its slide transition. | $('#identifier').on('slid.bs.carousel', function () { // do something }) |
Example
Following example demonstrates the usage of carousel plugin events -
<div id = "myCarousel" class = "carousel slide"> <!-- 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> <!-- Carousel items --> <div class = "carousel-inner"> <div class = "item active"> <img src = "/bootstrap/images/slide1.png" alt = "First slide"> </div> <div class = "item"> <img src = "/bootstrap/images/slide2.png" alt = "Second slide"> </div> <div class = "item"> <img src = "/bootstrap/images/slide3.png" alt = "Third slide"> </div> </div> <!-- Carousel nav --> <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a> <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a> </div> <script> $(function() { $('#myCarousel').on('slide.bs.carousel', function () { alert("This event fires immediately when the slide instance method" +"is invoked."); }); }); </script>
Output
When the above example is executed, it will produce the following result -
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Affix Plugin.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.