Bootstrap rotate usel rotation graph examples, bootstrapcarousel

Bootstrap rotate usel rotation graph examples, bootstrapcarousel

Image carousel effects are often seen on the Web, and many people call them slides. The main display effect is the playback of multiple images, from the right to the left. When you hover the mouse over the image, the playback will be paused. If you hover the mouse over or click the dot in the lower right corner, the corresponding image is displayed.

In the Bootstrap framework, this image Carousel effect is achieved through the Carousel plug-in.

Demo effect:

Code:

<! DOCTYPE html> 
Image carousel-Playback of declarative trigger carousel Images

There are two ways to play a carousel image. One is declarative, and the other is JavaScript. First, let's look at the declarative method.

The declarative method is implemented by defining the data attribute, which can easily control the carousel position. It mainly includes the following types:

• Data-ride attribute: The value is usel, which is defined on usel.
• Data-target attribute: The value is the ID defined by usel or another style identifier, as shown in the preceding example. The value is "# slidershow ", and define it on each li of the carousel counter.
• Data-slide attribute: values include prev, next, and prev, which indicate backward scrolling, and next, which indicates forward scrolling. The property value is also defined on the link of the carousel controller, And the href value of the controller is set to the ID of container carousel usel or another style identifier.
• Data-slide-to attribute: used to pass the subscript of a frame, such as data-slide-to = "2 ", you can directly jump to the specified frame (the subscript starts from 0), which is also defined on each li of the carousel counter.

In addition to data-ride = "usel", data-slide, and data-slide-to, the carousel component also supports three other custom attributes:


 
 
 
  
 
   
 
    
Attribute name
 
    
Type
 
    
Default Value
 
    
Description
 
   
 
   
 
    
Data-interval
 
    
Number
 
    
5000
 
    
Wait time for slide rotation (MS ). If it is false, the loop will not start automatically.
 
   
 
   
 
    
Data-pause
 
    
String
 
    
Hover
 
    
By default, When you hover your mouse over the slide area, you can stop and start playing.
 
   
 
   
 
    
Data-wrap
 
    
Boolean Value
 
    
True
 
    
Continuous Loop of carousel
 
   
 
  

 

The following code implements "continuous loop of Carousel" and "The interval between carousel is 1 second ".
<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">......</div> 
The preceding three attributes can be defined on the container element or on the identifier (or left/right control link), but the latter has a higher priority.

Image carousel-JavaScript trigger Method
The data-ride = "usel" and data-slide = "prev" and data-slide = "next" statements are removed, we can use JS Code to implement the functions of "automatic image Carousel" and "forward and backward buttons.

Use JS to implement "automatic image Carousel" and "forward and backward buttons"

By default, if the data-ride = "carousel usel" attribute is defined on the movie usel container, the carousel image switching effect is automatically loaded after the page is loaded. If the data-ride attribute is not defined, you can use the JavaScript method to trigger the carousel image switching. The usage is as follows:
Copy codeThe Code is as follows:
$ (". Carousel"). carousel ();

You can also specify the container ID:
Copy codeThe Code is as follows:
$ ("# Slidershow"). incluusel ();

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


 
 
 
  
 
   
 
    
Attribute name
 
    
Type
 
    
Default Value
 
    
Description
 
   
 
   
 
    
Interval
 
    
Number
 
    
5000
 
    
Wait time for slide rotation (MS ). If it is false, the loop will not start automatically.
 
   
 
   
 
    
Pause
 
    
String
 
    
Hover
 
    
By default, When you hover your mouse over the slide area, you can stop and start playing.
 
   
 
   
 
    
Wrap
 
    
Boolean Value
 
    
True
 
    
Continuous Loop of carousel
 
   
 
  

 

When using the plug-in, you can pass related parameters when initializing the plug-in, such:
$("#slidershow").carousel({interval: 3000}); 
In fact, when we configure parameters for the carousel () method, the carousel effect can be automatically switched. However, the pluusel plug-in the Bootstrap framework also provides users with several special calling methods, which are described as follows:

•. Cyclusel ("cycle"): loop from left to right;

•. Pause usel ("pause"): stops loop playback;

•. Repeated usel ("number"): loops to the specified frame. The subscript starts from 0, similar to an array;

•. Carousel ("prev"): returns to the previous frame;

•. Carousel ("next"): next frame

For example, the two buttons forward and backward cannot work normally in the preceding call method. carousel ("prev") and. the carousel ("next") method enables them to work normally. 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>
Bootstrap related topics are recommended for the help house:
BootStrap component Operation Skills
BootStrap knowledge Summary
The above section describes how to use the Bootstrap rotate usel rotation chart instance. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!