Bootstrap Carousel The use example of the rotary chart _javascript skills

Picture carousel effects are often seen in the web, and many people also call them slides. The main display of the effect is that more than one picture, playback from right to left, the mouse hover in the picture will pause playback, if the mouse hovers or click on the lower right corner of the dot, will display the corresponding picture.

This kind of picture carousel effect, in the bootstrap frame is through the carousel plug-in to realize

Demo Effect screenshot:

Code:

<! DOCTYPE html>  

Picture Carousel--The playback of a declarative touch-carousel graph

There are also two types of playback methods that trigger a carousel graph, one being declarative and the other a JavaScript way. First look at declarative methods.

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

Data-ride Property: Takes the value carousel and defines it on the carousel.

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

Data-slide Property: value includes prev,next,prev for backward scrolling, next for forward scrolling. The property value is also defined on the a link on the Carousel controller, setting the controller href value to the container carousel ID name or other style qualifier.

Data-slide-to Property: The subscript that is used to pass a frame, such as data-slide-to= "2", can jump directly to the specified frame (subscript starting at 0), also defined on each Li of the carousel counter.

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

Property name	Type	Default value	Describe
Data-interval	Number	5000	The wait time (in milliseconds) for the slide rotation. If False, the carousel will not start the loop automatically
Data-pause	String	Hover	The default mouse overhang stops playing in the slide area and starts playing
Data-wrap	Boolean value	True	Whether the carousel continues to cycle

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" > ...

The above three properties can be defined on container elements, or on identifiers (or left-right control links), but the latter are defined in a higher priority.

Picture Carousel--javascript Trigger method

Data-ride= "Carousel" and Data-slide= "prev", data-slide= "next" three statements removed, we use the JS code to achieve "picture automatic Carousel" and "forward, backward button" function implementation.

Using JS to achieve "picture automatic Carousel" and "forward, backward button" function realization

By default, if the data-ride= "Carousel" attribute is defined on the Carousel container, the carousel picture switch effect is automatically loaded after the page loads. If you do not define the Data-ride property, you can trigger a carousel picture switch by using the JavaScript method. The specific use of the following methods:

Copy Code code as follows:

$ (". Carousel"). Carousel ();

You can also specify by the ID of the container:

Copy Code code as follows:

$ ("#slidershow"). Carousel ();

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

Property name	Type	Default value	Describe
Interval	Number	5000	The wait time (in milliseconds) for the slide rotation. If False, the carousel will not start the loop automatically
Pause	String	Hover	The default mouse overhang stops playing in the slide area and starts playing
Wrap	Boolean value	True	Whether the carousel continues to cycle

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

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

In fact, when we configure parameters for the Carousel () method, the Carousel effect switches automatically. However, the Carousel plug-in in the Bootstrap framework gives the user several special invocation methods, which are described briefly as follows:

.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 the array;

.carousel ("prev"): Returns to the previous frame;

.carousel ("Next"): Next Frame

For example, the previous calling method, the forward and backward buttons, are not working properly, but you can use the. Carousel ("prev") and the. Carousel ("Next") method to get them working, the code is as follows:

$ (function () {$ ("#slidershow"). Carousel ({interval:2000}); $ ("#slidershow a.left"). Click (function () {$ (". Carousel")
. Carousel ("prev");
});
$ ("#slidershow a.right"). Click (function () {$ (". Carousel"). Carousel ("Next"); 
}); <! DOCTYPE html>  

Recommended bootstrap related topics in cloud-dwelling communities:

Bootstrap component Operation tips

Bootstrap Related Knowledge Summary

The above is a small set up to introduce the bootstrap carousel rotation map of the use of practical examples of the relevant knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!