Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html
This article mainly describes the JavaScript plug-in-carousel. If you don't talk nonsense, you can directly start learning.
The following describes the carousel cases created by the plug-in and related components.
<body style=> <div id= = data-ride=> <!-- Indicators --> <ol => <li data-target= data-slide-to= =></li> <li data-target= data-slide-to=></li> <li data-target= data-slide-to=></li> </ol> <!-- Wrapper slides --> <div = style=> <div => </img> </div> <div => </img> </div> <div => </img> </div> </div> <!-- Controls --> <a = href= data-slide=> <span =></span> </a> <a = href= data-slide=> <span =></span> </a> </div> <script src=></script> <script src=></script> <script type=> </script> </body>
Internet Explorer 8 & 9 does not support transition animation EffectsOptionalBootstrap implements animation effects based on CSS3, but Internet Explorer 8 & 9 does not support these necessary CSS attributes. Therefore, the transition animation effect will be lost when you use these two browsers. In addition, Bootstrap does not intend to use jQuery-based substitution functions.
In any.itemYou can add.carousel-captionAdd instructions for each slide. You can also add any HTML code, which will be automatically arranged and formatted.
<div => </img> <div =>Add the three items separately, and then the effect is sufficient.
AccessibilityUse data attributesThe carousel component is not compatible with the accessibility standard. If compatibility is required, consider other slides.
Using the data attribute, you can easily control the carousel positioning.
data-slideWhich can be used to control the playback positionprevOrnextKeyword. You can alsodata-slide-toPass0The subscript of the Start slide.
data-ride="carousel"This attribute is used to mark the carousel components that start after the page is loaded.Add it to the carousel container at the outermost layer.
<div id= = data-ride=>Using JavaScriptManually start the carousel component (the data-ride attribute is used to automatically enable the carousel component .) :
$().carousel()OptionOptions can be passed through the data attribute or JavaScript. For the data attribute, you need to put the option name in
Methoddata-For exampledata-interval="".$().carousel(options)Initialize the carousel component and accept an optional
objectType options parameter, and start the slide loop.$(. Carousel ('cycle') loops frames from left to right .. Disable usel ('pause') to stop carousel .. Carousel (number) redirects 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') to the next frame. EventThe Bootstrap carousel component exposes two events for listening.
$().on(In this way, events are bound to the carousel component and executed at the corresponding runtime. This is also explained in the previous JavaScript plug-ins in many ways, the form is common, so as long as it will be used.
This is a few of the more practical image carousel plug-ins, the effect is very good, reasonable use, will always give your page points. JavaScript plug-ins have almost finished learning. Although they are only simple to use, they have gained a lot.
This article has been updated to the Bootstrap3.0 getting started learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
