Bootstrap is a front-end framework for the rapid development of web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.
Case
The following is a carousel case made by this plug-in and related components.
<div id="carousel-example-generic" data-ride="carousel"><!-- Indicators --><ol><li data-target="#carousel-example-generic" data-slide-to="0"></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><div><img src="..."><div>...</div></div>...</div><!-- Controls --><a href="#carousel-example-generic" data-slide="prev"><span></span></a><a href="#carousel-example-generic" data-slide="next"><span></span></a></div>
Internet Explorer 8 & 9 does not support transition animation effects
Bootstrap implements animation effects based on CSS3, but Internet Explorer 8 & 9 does not support these necessary CSS properties. Therefore, transition animation effects will be lost when using both browsers. Moreover, we do not intend to use jQuery-based implementation of alternative functions.
Optional Options
In any .item, you can add .carousel-caption to each slide. You can also add any HTML code, which will be automatically arranged and formatted.
900x500
<div><img src="..."><div><h3>...</h3><p>...</p></div></div>
Accessibility issues
The carousel component is not compatible with the accessibility standards. If compatibility is required, consider other options for presenting slides.
usage
Through data attribute
The data attribute can easily control the positioning of the carousel. data-slide can accept prev or next keywords that control the playback position. In addition, the slide subscript starting with 0 can also be passed through data-slide-to.
The data-ride="carousel" attribute is used to mark the carousel component that starts after the page is loaded.
via JavaScript
Manually start the carousel component:
The code copy is as follows:
$('.carousel').carousel()
Options
Options can be passed through data properties or JavaScript. For data attributes, you need to put the option name after data-, for example data-interval="".
Name type default value describes the waiting time for interval number 5000 slide rotation. If false, the carousel will not start the loop automatically. pause string "hover" The mouse stays in the slide area and pauses the carousel, and the mouse leaves the carousel. wrap boolean true whether the carousel continues to loop.
method
.carousel(options)
Initialize the carousel component, accept an optional object type option parameter, and start the slide loop.
$('.carousel').carousel({interval: 2000}).carousel('cycle')Cycle each frame from left to right.
.carousel('pause')
Stop carousel.
.carousel(number)
Position the carousel to the specified frame (frame subscript starts with 0, similar to an array).
.carousel('prev')
Return to the previous frame.
.carousel('next')
Go to the next frame.
event
Bootstrap's carousel component exposes two events for listening.
| Event Type | describe |
|---|---|
| slide.bs.carousel | This event starts immediately after slide method is called. |
| slid.bs.carousel | It is triggered when all slideshows are played. |
$('#myCarousel').on('slide.bs.carousel', function () {// do something…})The above is the detailed explanation of the BootStrap carousel effect case based on JS plug-in introduced by the editor. I hope it can help you!