18th Chapter Carousel Plugin

Learning Essentials:

1. Carousel Plugin

Keynote Teacher: Li Tinghui

In this lesson we mainly learn about the Carousel plugin in Bootstrap.

A Carousel
Carousel Plug-in is a few Zhang Tong, such as the size of a large map, in order to play sequentially.
Basic instance.

<DivID= "Mycarousel"class= "Carousel Slide">    <olclass= "Carousel-indicators">        <LiData-target= "#myCarousel"data-slide-to= "0"class= "Active"></Li>        <LiData-target= "#myCarousel"data-slide-to= "1"></Li>        <LiData-target= "#myCarousel"data-slide-to= "2"></Li>    </ol>    <Divclass= "Carousel-inner">        <Divclass= "Item Active">            <imgsrc= "Img/slide1.png"alt= "First piece">        </Div>        <Divclass= "Item">            <imgsrc= "Img/slide2.png"alt= "Second Piece">        </Div>        <Divclass= "Item">            <imgsrc= "Img/slide3.png"alt= "Third piece">        </Div>    </Div>    <ahref= "#myCarousel"Data-slide= "Prev"class= "Carousel-controlleft">&lsaquo;</a>    <ahref= "#myCarousel"Data-slide= "Next"class= "Carousel-controlright">&rsaquo;</a></Div>

The Data property explains:

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 to create 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 is counted starting at 0.
3.data-ride= "Carousel" Property user-tagged carousel starts animation playback when the page loads.

If you use the key-value pair method directly in JavaScript call, and remove data-;
Setting custom Properties

$ (' #myCarousel '). Carousel ({    // Set auto Play/2 sec    interval:2000,    //  Set Pause button event    pause: ' hover ',    // unicast only once    false

The Carousel plugin also provides some methods, as follows:

Click the button to execute

function () {    /// Click to automatically play    $ (' #myCarousel '). Carousel (' Cycle ');     // other similarities });

Event

function () {    alert (' triggers as soon as the slide instance is invoked ');}); $ (function() {    alert (' When the carousel completes a slide trigger ')

18th Carousel Plug-in