BootStrap Learning (7) _ carousel graph, bootstrap

BootStrap Learning (7) _ carousel graph, bootstrap
I. Carousel Images

The Bootstrap Carousel plug-in is a flexible and responsive way to add a slider to a site. In addition, the content is flexible enough, including images, embedded frames, videos, and any other types of content you want to place.

If you want to independently reference the functions of this plug-in, you need to reference carousel. js in BootStrap.

Example:

1. The Bootstrap Carousel plug-in is used to display a common component of loop playback elements. To implement carousel, you only need to add the Code with this flag. You do not need to use the data attribute. You only need to perform simple class-based development.

2. optional title: You can use. ItemInternal. Carousel-captionElement to add a title to the slide. You only need to place any optional HTML here. It is automatically aligned and formatted.

<! DOCTYPE html> 
Effect:

 
Usage:


 

 
  
Data attributes: Using the data attribute, you can easily control the position of Carousel. 
   
 
    
AttributeData-slideAccept keywordsPrevOrNextTo change the position of the slide relative to the current position.
 
    
UseData-slide-To a original moving index at the bottom of the carousel bed,Data-slide-to = "2"The slider is moved to a specific index and the index starts counting from 0.
 
    
Data-ride = "carousel"This attribute is used to mark that the animation starts to play when the page is loaded.
 
   
 
  
Using JavaScript: Carousel can be manually called using JavaScript, as shown below:
$('.carousel').carousel()

 
 
Option

 

 
  
 
   
 
    
Option name
 
    
Default type
 
    
Data attribute name
 
    
Description
 
   
 
   
 
    
Interval
 
    
Number
Default Value: 5000
 
    
Data-interval
 
    
Automatically cycle the amount of time delay between each project. If this parameter is set to false, carousel will not automatically loop.
 
   
 
   
 
    
Pause
 
    
String
Default Value: "hover"
 
    
Data-pause
 
    
When the mouse enters, the loop is paused. When the mouse leaves, the loop is resumed.
 
   
 
   
 
    
Wrap
 
    
Boolean
Default Value: true
 
    
Data-wrap
 
    
Whether the carousel is continuous or not.
 
   
 
  

 
 
Method
The following are some useful methods in the Carousel plug-in:

 

 
  
 
   
 
    
Method
 
    
Description
 
    
Instance
 
   
 
   
 
    
. Carousel (options)
 
    
Initialize the carousel as an optional options object and start the Loop Project.
 
    
$('#identifier').carousel({  interval: 2000})
 
   
 
   
 
    
. Carousel ('cycle ')
 
    
From left to right.
 
    
$('#identifier').carousel('cycle')
 
   
 
   
 
    
. Usel ('pause ')
 
    
Stop the carousel Loop Project.
 
    
$('#identifier')..carousel('pause')
 
   
 
   
 
    
. Carousel (number)
 
    
Loop carousel to a specific frame (counting starts from 0, similar to array ).
 
    
$('#identifier').carousel(number)
 
   
 
   
 
    
. Cancusel ('prev ')
 
    
Loop to the previous project.
 
    
$('#identifier').carousel('prev')
 
   
 
   
 
    
. Carousel ('Next ')
 
    
Loop To the next project.
 
    
$('#identifier').carousel('next')
 
   
 
  

 
 
Event
The following table lists the events to be used in the Carousel plug-in. These events can be used as hooks in functions.

 

 
  
 
   
 
    
Event
 
    
Description
 
    
Instance
 
   
 
   
 
    
Slide. bs. carousel
 
    
This event is triggered immediately when the slide instance method is called.
 
    
$ ('# Identifier'). on ('slide. bs. resumusel', function () {// execute some actions ...})
 
   
 
   
 
    
Slid. bs. carousel
 
    
This event is triggered when slideshow completes the slide transition effect.
 
    
$ ('# Identifier'). on ('slid. bs. identiusel', function () {// execute some actions ...})
 
   
 
  

 
That is, an event is triggered when an image is switched.