Bootstrap is a front-end framework for rapid development of Web applications and Web sites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.
Case
The following shows a carousel case made by this plugin and related components.
<div id= "Carousel-example-generic" class= "Carousel Slide" data-ride= "Carousel" > <!--indicators--> <ol class= "Carousel-indicators" > <li data-target= "#carousel-example-generic" data-slide-to= "0" class= "active" ></li> <li data-target= "#carousel-example-generic" data-slide-to= "1" ></li> <li data-target= "#carousel-example-generic" data-slide-to= "2" ></li> </ol> <!--wrapper for slides--> <div class= "Carousel-inner" > <div class= "Item Active" > <div class= " Carousel-caption "> </div> </div> ... </div> <!--Controls--> <a class=" left Carousel-c Ontrol "href=" #carousel-example-generic "data-slide=" prev "> <span class=" Glyphicon glyphicon-chevron-left " ></span> </a> <a class= "right Carousel-control" href= "#carousel-example-generic" data-slide= "Next"
> <span class= "Glyphicon glyphicon-chevron-right" ></span> </a></div>
Internet Explorer 8 & 9 does not support transition animation effects
Bootstrap animations are based on CSS3, but Internet Explorer 8 & 9 does not support these necessary CSS properties. As a result, the transition animation effect is lost when you use both of these browsers. Furthermore, we do not intend to use jQuery to implement alternative functionality.
Optional options
In any . Item , you can add carousel-caption to each frame slide by adding . You can also add any HTML code that will be automatically arranged and formatted.
900x500
<div class= "Item Active" >
<div class=" Carousel-caption ">
Accessibility issues
The Carousel component is not compatible with accessibility standards. If compatibility is required, consider other scenarios for presentation slides.
Usage
Through the Data property
The Data property makes it easy to control the positioning of the carousel. Data-slide can accept the prev or next keyword that controls the playback position. Alternatively, you can pass the data-slide-to with a 0-based slide mark.
The data-ride= "Carousel" property is used to mark the Carousel component that starts after the page loads.
Through JavaScript
To start the Carousel component manually:
Copy Code code as follows:
$ ('. Carousel '). Carousel ()
Options
You can pass options through the Data property or JavaScript. For the Data property, the option name needs to be placed after data-, such as data-interval= "".
name |
type |
Default Value |
Description |
Interval |
Number |
5000 |
The wait time for the slide rotation. If False, the carousel does not automatically start the loop. |
Pause |
String |
"Hover" |
The mouse pauses in the slide area to suspend the carousel, and the mouse leaves to start the carousel. |
Wrap |
Boolean |
True |
Whether the carousel continues to cycle. |
Method
. Carousel (Options)
Initialize the Carousel component, accept an optional object type options parameter, and start the slide loop.
$ ('. Carousel '). Carousel ({
interval:2000
})
. Carousel (' Cycle ')
Loops the frames from left to right.
. Carousel (' pause ')
Stop the carousel.
. Carousel (number)
Navigates the carousel to the specified frame (the frame subscript starts with 0, similar to an array).
. Carousel (' prev ')
Returns to the previous frame.
. Carousel (' Next ')
Go to the next frame.
Event
The bootstrap Carousel component exposes two events for monitoring.
Event Type |
Description |
Slide.bs.carousel |
This event slide starts immediately after the method is invoked. |
Slid.bs.carousel |
Triggered when all slides are finished playing. |
$ (' #myCarousel '). On (' Slide.bs.carousel ', function () {
//do something ...
})
The above is a small set to introduce the JS plug-in based on the production of Bootstrap carousel effect of the relevant knowledge of the case, I hope to be able to help everyone!