A comprehensive analysis of the _javascript techniques of bootstrap pictures ' carousel effect

Share three kinds of bootstrap picture carousel effect, I believe there is always a satisfaction!

First Effect: Bootstrap simple round-seeding

<! DOCTYPE html>  

The second type: with Banner Carousel (manual)

<! DOCTYPE html>  

Third: JS control automatic carousel

<! DOCTYPE html>  

You can set specific parameters in the Carousel () method, such as:

When used, the associated parameters can be passed off when the plug-in is initialized, such as:

$ ("#slidershow"). Carousel ({
 interval:3000
});

The Carousel plug-in in the Bootstrap framework also provides several special invocation methods for the user, briefly described below:

. Carousel ("cycle"): loop playback from left to right;
. Carousel ("Pause"): stop loop playback;
. Carousel ("number"): loops to the specified frame, subscript starting from 0, similar to an array;
. Carousel ("prev"): returns to the previous frame;
. Carousel ("Next"): Next Frame

To control the carousel with the Data property:

<! DOCTYPE html>  

Declarative methods are implemented by defining the data property, which can easily control the location of the carousel. It mainly includes the following kinds:

1. Data-ride Property: value Carousel, and define it on carousel.

2. Data-target Property: value Carousel defined ID name or other style qualifier, as shown in the previous example, with a value of "#slidershow" and defined on each Li of the carousel counter.

3. Data-slide property: values include prev,next,prev for backward scrolling, next for forward scrolling. The property value is also defined on the a link on the wheel map controller, while the controller href value is set to container 4. The ID name of the carousel or other style qualifier.

5. Data-slide-to properties: used to pass a frame of the subscript, such as data-slide-to= "2", you can jump directly to the specified frame (subscript from the 0 start), also defined in the carousel counter on each li.

Here you need to note that you can add a slide style to the #slidershow layer, and use pictures and pictures to change the effect has a smooth feeling.

<div id= "Slidershow" class= "Carousel Slide" data-ride= "Carousel" > ...
</div>

In addition to Data-ride= "Carousel", Data-slide, and data-slide-to, the Carousel component also supports three other custom properties:

The following code implements the "round robin Cycle" and the "1-second" carousel interval.

<div id= "Slidershow" class= "Carousel" data-ride= "Carousel" data-wrap= "false" data-interval= "1000" > ...
</div>

If you want to further study, you can click here to learn, and then add a wonderful theme: Bootstrap learning tutorials JavaScript Pictures Carousel Effect Summary

The above is for JavaScript picture Carousel For detailed introduction, I hope this article for you to learn JavaScript programming help.