Bootstrap (Carousel) plug-in _javascript tips for everyday learning

The Bootstrap Carousel plug-in is a flexible, responsive way to add sliders to a site. In addition, the content is flexible enough to be an image, inline frame, video, or whatever type of content you want to place.

If you want to refer to the functionality of the plug-in separately, you need to refer to carousel.js. Alternatively, as mentioned in the Bootstrap Plug-in Overview chapter, you can refer to the Bootstrap.js or compressed version of Bootstrap.min.js.

First, the example
here is a simple slide that uses the Bootstrap Carousel (Carousel) plug-in to display a generic component for looping the elements. To implement a carousel, you only need to add code with that tag. You do not need to use the Data property, just a simple development based on class.

<! DOCTYPE html>  

The results are as follows:

Simple Carousel (Carousel) Plugin

Second, the optional title
You can add a caption to a slide by using the. carousel-caption element in the. Item. You only need to place any optional HTML at that point, and it is automatically aligned and formatted. The following example demonstrates this:

<! DOCTYPE html>  

The results are as follows:

Title of the Carousel (carousel) Plug-in

Iii. usage

With the Data property: Using the Data property makes it easy to control the location of the Carousel (carousel).
Property Data-slide Accept the keyword prev or next to change the position of the slide relative to the current position.
Using data-slide-to to a raw sliding index to the bottom of the carousel, data-slide-to= "2" will move the slider to a specific index, starting with the index counting from 0.
The data-ride= "Carousel" property is used to mark the rotation of the carousel when the page is loaded.

javascript: Carousel (Carousel) can be invoked manually through JavaScript, as follows:
$ ('. Carousel '). Carousel ()

Iv. Options
Some options are passed through the Data property or JavaScript. The following table lists the options:

V. Methods
The following are useful methods in some carousel (carousel) Plug-ins:

Vi. examples
The following example demonstrates the use of the method:

<! DOCTYPE html>  

The results are as follows:

Carousel (Carousel) Plug-in method

VII. Events

The following table lists the events that are used in the Carousel (Carousel) plug-in. These events can be used as hooks in the function.

Instance
The following example demonstrates the use of an event:

<! DOCTYPE html>  

The results are as follows:

Carousel (Carousel) Plug-in events

According to the above tutorial to make your own examples:

The Carousel plug-in is a few Zhang Tong size of the large map, in order to play in turn.

Basic instance.

<div id= "Mycarousel" class= "Carousel Slide" >
 <ol class= "carousel-indicators" >
 <li data-target= "#myCarousel" data-slide-to= "0"
 class= "active" ></li>
 <li data-target= "# Mycarousel "data-slide-to=" 1 "></li>
 <li data-target=" #myCarousel "data-slide-to=" 2 "></li >
 </ol>
 <div class= "Carousel-inner" >
 <div class= "Item Active" >
 
 </div>
 <div class= "Item" >
 
 </div>
 <div class= "Item" >
 
 </div>
 </div>

 <a href= "#myCarousel" data-slide= "prev" class= "Carousel-controlleft" >‹</a>
 <a href= "#myCarousel" data-slide= "Next" class= "Carousel-controlright" >›</a>
</div>

The Data property explains:

1.data-slide accept the keyword prev or next to change the position of the slide relative to the current position;
2.data-slide-to to create an original sliding index to the bottom of the carousel, data-slide-to= "2" moves the slider to a specific index, and the index starts counting from 0.
3.data-ride= the "Carousel" Property user tag The carousel starts animating when the page loads.

If you are calling in JavaScript, use the key-value pairs directly and remove the data-;
Setting custom Properties

$ (' #myCarousel '). Carousel ({
 //Set AutoPlay/2 sec
 interval:2000,
 //Set Pause button event
 pause: ' hover ',//
 only once
 wrap:false,
});

The Carousel plug-in also provides a number of methods, as follows:

Click on the button to execute $ ('

button '). On (' click ', Function () {
 //click, Auto Play
 $ (' #myCarousel '). Carousel (' cycle ');
 Other similarities
});

Event

$ (' #myCarousel '). On (' Slide.bs.carousel ', function () {
 alert (' triggers immediately when invoking slide instance mode ');

$ (' #myCarousel '). On (' Slid.bs.carousel ', function () {
 alert (' When the carousel completes a slide trigger ');

More content can refer to: Bootstrap Learning Tutorials

The above is the entire content of this article, I hope to learn Bootstrap carousel (Carousel) Plug-ins help.