The Bootstrap carousel plug-in is a flexible and responsive way to add sliders to your site. Besides that, the content is flexible enough to be an image, an embedded frame, a video, or any other type of content you want to place.
If you want to reference the functionality of the plugin separately, then you need to reference carousel.js. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
1. Example
Below is a simple slide that shows a common component of a looping element using the Bootstrap Carousel plugin. To implement carousel, you just need to add the code with that mark. There is no need to use data attributes, just simple class-based development.
<!DOCTYPE html><html><head> <title>Bootstrap instance- Simple Carousel plug-in</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/media/uploads/2014/07/slide1.png"> </div> <div> <img src="/media/uploads/2014/07/slide2.png"> </div> <div> <img src="/media/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a></div> </body></html>
The results are as follows:
Simple Carousel plugin
2. Optional title
You can add a title to the slide via the .carousel-caption element within the .item. Just put any optional HTML there and it will be automatically aligned and formatted. The following example demonstrates this:
<!DOCTYPE html><html><head> <title>Bootstrap instance - Title of Carousel plug-in</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/media/uploads/2014/07/slide1.png"> <div>Title 1</div> </div> <div> <img src="/media/uploads/2014/07/slide2.png"> <div>Title 2</div> </div> <div> <img src="/media/uploads/2014/07/slide3.png"> <div>Title 3</div> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a></div> </body></html>
The results are as follows:
Carousel plugin title
3. Usage
Through data attribute: Using data attributes, it is easy to control the position of the carousel.
The property data-slide accepts the keyword prev or next to change the position of the slide relative to the current position.
Use data-slide-to to a raw sliding index to the bottom of the carousel bed. data-slide-to="2" will move the slider to a specific index, and the index counts from 0.
The data-ride="carousel" property is used to mark the carousel that starts animation playback when the page is loaded.
Through JavaScript: Carousel can be called manually through JavaScript, as shown below:
$('.carousel').carousel()
4. Options
There are some options passed through data properties or JavaScript. The following table lists these options:
V. Method
Here are some useful methods in Carousel plug-ins:
VI. Example
The following example demonstrates the usage of the method:
<!DOCTYPE html><html><head> <title>Bootstrap instance - Carousel plug-in method</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/media/uploads/2014/07/slide1.png"> </div> <div> <img src="/media/uploads/2014/07/slide2.png"> </div> <div> <img src="/media/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a> <!-- Control Button--> <div style="text-align:center;"> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1"> <input type="button" value="Slide 2"> <input type="button" value="Slide 3"> </div></div><script> $(function(){ // Initialize carousel$(".start-slide").click(function(){ $("#myCarousel").carousel('cycle'); }); // Stop carousel$(".pause-slide").click(function(){ $("#myCarousel").carousel('pause'); }); // Stop carousel$(".pause-slide").click(function(){ $("#myCarousel").carousel('pause'); }); // Looping to the previous project $(".prev-slide").click(function(){ $("#myCarousel").carousel('prev'); }); // Looping to the next project $(".next-slide").click(function(){ $("#myCarousel").carousel('next'); }); // Looping to the specific frame $(".slide-one").click(function(){ $("#myCarousel").carousel(0); }); $(".slide-two").click(function(){ $("#myCarousel").carousel(1); }); $(".slide-three").click(function(){ $("#myCarousel").carousel(2); }); }); });</script> </body></html>The results are as follows:
Carousel plug-in method
7. Events
The following table lists the events to be used in the Carousel plug-in. These events can be used as hooks in functions.
Example
The following example demonstrates the usage of events:
<!DOCTYPE html><html><head> <title>Bootstrap instance- Carousel plug-in event</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel metric--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/media/uploads/2014/07/slide1.png"> </div> <div> <img src="/media/uploads/2014/07/slide2.png"> </div> <div> <img src="/media/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a></div><script> $(function(){ $('#myCarousel').on('slide.bs.carousel', function () { alert("Flashes the event immediately when the slide instance method is called."); }); }); }); </script> </body></html>The results are as follows:
Carousel plugin events
According to the above tutorial, I made my own example:
The carousel plug-in plays several large pictures of the same size in order.
//Basic example. <div id="myCarousel"> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div> <div> <img src="img/slide1.png"> </div> <div> <img src="img/slide2.png"> </div> <div> <img src="img/slide2.png"> </div> <div> <img src="img/slide3.png"> </div> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a></div>
data attribute explanation:
1.data-slide accepts the keyword prev or next to change the position of the slide relative to the current position;
2.data-slide-to creates an original sliding index to the bottom of the carousel. data-slide-to="2" will move the slider to a specific index, and the index counts from 0.
3.data-ride="carousel" attribute user tag carousel starts animation playback when the page is loaded.
If you call it in JavaScript, use the key-value pair method directly and remove data-;
//Set custom properties
$('#myCarousel').carousel({ //Set automatic playback/2 seconds interval: 2000, //Set the event pause: 'hover', //Play only once wrap: false,});The carousel plugin also provides some methods, as follows:
//Click the button to execute $('button').on('click', function() { //After clicking, $('#myCarousel').carousel('cycle'); //Other similar});event
$('#myCarousel').on('slide.bs.carousel', function() { alert('Free immediately when the slide instance mode is called');}); $('#myCarousel').on('slid.bs.carousel', function() { alert('Free when the carousel completes a slide');});For more content, please refer to: Bootstrap learning tutorial
The above is all about this article. I hope it will be helpful for everyone to learn the Bootstrap Carousel plug-in.