Bootstrap Basic Plug-ins Learning Notes Carousel Slide (_javascript) Tips

The Bootstrap Carousel (Carousel) plug-in is a flexible, responsive way to add sliders to a site.

0x01 Basic Examples

Bootstrap to achieve the effect of a carousel slide, simply use class development to:

<! DOCTYPE html>  

The effect is as follows:

A few notes:

(1) Property data-slide accept the keyword prev or next to change the position of the slide relative to the current position.
(2) using Data-slide-to to pass an original sliding index to the carousel, data-slide-to= "2" moves the slider to a specific index, and the index starts counting from 0.
(3) The data-ride= "Carousel" property is used to mark the rotation of the carousel when the page is loaded.

0x02 Add title

You can add a title to a slide by using the. carousel-caption element in the. Item:

<! DOCTYPE html>  

The effect is as follows:

0x03 JS Switch

You can also use JS to achieve the slide switch. Add a few buttons below to implement the slide control:

<! DOCTYPE html>  

The effect is as follows:

0X04 Events

In the same way, Carousel also defines some events:

(1) Slide.bs.carousel
This event is triggered immediately when the slide instance method is invoked:

$ (' #mycarouel '). On (' Slide.bs.carousel ', function () {
 //perform some actions ...
})

(2) Slid.bs.carousel
This event is triggered when the carousel completes the Slide transition effect:

$ (' #mycarouel '). On (' Slid.bs.carousel ', function () {
 //perform some actions ...
})

Look at the following example:

<! DOCTYPE html>  

The effect is as follows:

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.