Bootstrap Carousel Plugin

Tag: false carousel function als IDE jpg button car boot

A Carousel

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= "Yhmgc/img/1.jpg"alt= "First piece"> </Div>    <Divclass= "Item"> <imgsrc= "Yhmgc/img/2.jpg"alt= "Second Piece"> </Div>    <Divclass= "Item"> <imgsrc= "Yhmgc/img/3.jpg"alt= "Third piece"> </Div>  </Div>  <ahref= "#myCarousel"Data-slide= "Prev"class= "Carousel-control Left">&lsaquo;</a> <ahref= "#myCarousel"Data-slide= "Next"class= "Carousel-control Right">&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.

There are three custom attributes for the Carousel plugin:

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

Setting custom Properties

$ (' #myCarousel '). Carousel ({//interval:2000// Set pause button Events Pause: ' hover '//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 ');});

Bootstrap Carousel Plugin