Implementation of rotation carousel for Bootstrap pictures

Bootstrap Primary Knowledge Rotation carousel

Source files: carousel.js, carousel.less

CSS file: bootstrap.css

These source files can be downloaded from bootstrap, about carousel, there are many translations, someone called the carousel, someone called the Carousel. The carousel effect by default is to the revolver, everyone first look at Oh!

Here is the source code:

<div class= "Row" >
<div id= "mid" class= "col-xs-6" >
<div data-ride= "Carousel" class= "Carousel Slide" id= "Carousel-container" >
<div class= "Carousel-inner" >

/*--Place the carousel here picture--*/
<div class= "Item" ></img></div>
<div class= "Item Active" ></img></div>
<div class= "Item" ></img></div>
</div>
<ol class= "Carousel-indicators" >
<li data-slide-to= "0" data-target= "#carousel-container" ></li>
<li data-slide-to= "1" data-target= "#carousel-container" ></li>
<li data-slide-to= "2" data-target= "#carousel-container" class= "active" ></li>
</ol>
<a data-slide= "prev" href= "#carousel-container" class= "left Carousel-control" >
<span class= "Glyphicon glyphicon-chevron-left" ></span>
</a>
<a data-slide= "Next" href= "#carousel-container" class= "right Carousel-control" >
<span class= "Glyphicon glyphicon-chevron-right" ></span>
</a>
</div>
</div>

Custom properties for rotating a carousel component

Property name	Type	Default value	Describe
Data-interval	Number	5000	The wait time (in milliseconds) for the slide carousel. If False, the carousel will not automatically start looping
Data-pause	String	Hover	The default mouse hovers over the slide area, pausing the carousel. The mouse is left to start the carousel
Data-wrap	Boolean	True	Does the carousel continue to circulate

Implementation of rotation carousel for Bootstrap pictures