Home>

This article mainly learns about the javascript plugin-carousel. Not much nonsense,Go straight to learning.The full tutorial is available at:bootstrap 3.0 tutorial

Carousel

The following shows the carousel case made by this plug-in and related components.

<body>
<div data-ride="carousel">
<!-Indicators->
<ol>
<li data-target="#carousel-example-generic" data-slide-to="0"&​​gt;
</li>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
</li>
</ol><!-Wrapper for slides->
<div>
<div>
<img>
</img>
</div>
<div>
<img>
</img>
</div>
<div>
<img>
</img>
</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>
<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. As a result, transition animation effects will be lost when using both browsers.Moreover, bootstrap does not intend to use jquery-based alternatives.

Optional option

It can be added in any .item.carousel-caption thus adding explanatory text 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>

For three terms,Add separately,Then the effect is worth it.

Accessibility issues

The carousel component is not compatible with accessibility standards.If compatibility is required,Consider other options for showing slides.

Usage via data attribute

The data property can easily control the positioning of the carousel.data-slide can accept prev or next keywords that control the playback position. In addition, you can also pass slide indexing starting with 0 through data-slide-to.

The data-ride="carousel" attribute is used to mark the carousel component that starts after the page loads.

Just add it to the outer carousel

<div data-ride="carousel">

Via javascript

Start the carousel component manually (we used the data-ride property to automatically start the carousel component above.):

$(". carousel"). carousel ()

Option

Options can be passed through the data attribute or javascript. For the data attribute, you need to put the option name after data-, such as data-interval="".

method

$(""). carousel (options)

Initialize the carousel component,Takes an optional options parameter of type object and starts the slideshow loop.

$(". carousel"). carousel ({
interval:2000
})

.carousel ("cycle") Cycles frames from left to right.

.carousel ("pause") Stops carousel.

.carousel (number) Positions the carousel on the specified frame (frame index 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 listening.

$("#carousel-example-generic"). on ("slide.bs.carousel", function ()
{
alert (1);
})

Just bind the event for the carousel component,Then it will be executed at the corresponding runtime.This is also explained in the previous javascript plugin,The forms are universalSo as long as you can use it.

image

If i want to learn more,Can clickHereTo learn,Attached 2 exciting topics for everyone:

  • Previous Study notes on the Session object in JavaWeb
  • Next Yii2 assets clear cache method