This article mainly learns the JavaScript plug-in - carousel. Without further ado, just go to study. The complete tutorial can be viewed: Bootstrap 3.0 tutorial
Carousel
The following is a carousel case made by this plug-in and related components.
<body><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 style="text-align:center"><div><img >/img></div><div><img >/img></div><div><img >/img></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><script src="js/jquery-2.0.3.min.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript">//$('.carousel').carousel('next');</script></body>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, Bootstrap does not intend to use jQuery-based 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.
<div><img >/img><div><h4>First Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div>
Add three items, and then the effect will be rated.
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.
Add it in the outermost carousel container
<div id="carousel-example-generic" data-ride="carousel">
via JavaScript
Manually start the carousel component (above we automatically turn on the carousel component by using the data-ride property.):
$('.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="".
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') loops each frame from left to right.
.carousel('pause') Stops the carousel.
.carousel(number) Positions the carousel to the specified frame (frame subscript starts with 0, similar to an array).
.carousel('prev') returns to the previous frame.
.carousel('next') Go to the next frame.
event
Bootstrap's carousel component exposes two events for listening.
$('#carousel-example-generic').on('slide.bs.carousel', function (){alert(1);})This binds events to the carousel component, and then executes them at the corresponding runtime. This was explained a lot in the previous JavaScript plug-ins, and the forms are all general, so you can just use them.
picture
These are several more practical picture carousel plug-ins, which have very good results. If used reasonably, they will always add points to your page. I hope it will be helpful to everyone's learning.
If you are not satisfied, you can check these articles for in-depth study: The editor of "Bootstrap Learning Tutorial" makes progress with you!
If you still want to study in depth, you can click here to study and attach two exciting topics to you:
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.