Detailed explanation of the carousel effect case of BootStrap JS plug-in, bootstrapjs

Detailed explanation of the carousel effect case of BootStrap JS plug-in, bootstrapjs

Bootstrap is a front-end framework used to quickly develop Web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.

Case

The following is a carousel case of this plug-in and related components.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides --><div class="carousel-inner"><div class="item active"><div class="carousel-caption">...</div></div>...</div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div>

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 attributes. Therefore, the transition animation effect will be lost when you use these two browsers. Furthermore, we do not intend to use jQuery-based alternatives.

Optional

In any. item, you can add. carousel-caption to add instructions for each slide. You can also add any HTML code, which will be automatically arranged and formatted.

900x500

<div class="item active"><div class="carousel-caption">
Accessibility
The carousel component is not compatible with the accessibility standard. If compatibility is required, consider other slides.
Usage
Data attributes
Using the data attribute, you can easily control the carousel positioning. Data-slide can accept the prev or next keyword that controls the playback position. In addition, you can use data-slide-to pass the slide subscript starting with 0.
The data-ride = "usel" attribute is used to mark the carousel components started after the page is loaded.
Using JavaScript
Manually start the carousel component:
Copy codeThe Code is as follows:
$ ('. Invalid usel'). Invalid usel ()

Option
Options can be passed through the data attribute or JavaScript. For the data attribute, you need to put the option name after data-, for example, data-interval = "".


 
 
 
  
 
   
 
    
Name
 
    
Type
 
    
Default Value
 
    
Description
 
   
 
  
 
 
  
 
   
 
    
Interval
 
    
Number
 
    
5000
 
    
The waiting time for slide rotation. If this parameter is set to false, the loop does not start automatically.
 
   
 
   
 
    
Pause
 
    
String
 
    
"Hover"
 
    
When you move the mouse to the slide area, the slideshow is paused. When you move the mouse away, the slideshow is started.
 
   
 
   
 
    
Wrap
 
    
Boolean
 
    
True
 
    
Whether the loop is continuous or not.
 
   
 
  

 

Method
. Carousel (options)
Initialize the carousel component, accept an optional object-type options parameter, and start the slide loop.
$('.carousel').carousel({interval: 2000}).carousel('cycle')
Cycle frames from left to right.
. Usel ('pause ')
Stop carousel.
. Carousel (number)
Position the carousel to the specified frame (the frame subscript starts with 0, similar to an array ).
. Cancusel ('prev ')
Returns to the previous frame.
. Carousel ('Next ')
To the next frame.
Event
The Bootstrap carousel component exposes two events for listening.


 
 
 
  
 
   
 
    
Event Type
 
    
Description
 
   
 
  
 
 
  
 
   
 
    
Slide. bs. carousel
 
    
This event is inslideStart immediately after the method is called.
 
   
 
   
 
    
Slid. bs. carousel
 
    
Triggered after all slides are played.
 
   
 
  

 

$('#myCarousel').on('slide.bs.carousel', function () {// do something…})
The above section describes how to create a BootStrap carousel effect case based on the JS plug-in. I hope this will help you!