Bootstrap JS Plug-in Carousel effect case detailed _javascript skills

Bootstrap is a front-end framework for rapid development of Web applications and Web sites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.

Case

The following shows a carousel case made by this plugin 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-c Ontrol "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 animations are based on CSS3, but Internet Explorer 8 & 9 does not support these necessary CSS properties. As a result, the transition animation effect is lost when you use both of these browsers. Furthermore, we do not intend to use jQuery to implement alternative functionality.

Optional options

In any . Item , you can add carousel-caption to each frame slide by adding . You can also add any HTML code that will be automatically arranged and formatted.

900x500

<div class= "Item Active" >

<div class=" Carousel-caption ">
 
 

Accessibility issues

The Carousel component is not compatible with accessibility standards. If compatibility is required, consider other scenarios for presentation slides.

Usage

Through the Data property

The Data property makes it easy to control the positioning of the carousel. Data-slide can accept the prev or next keyword that controls the playback position. Alternatively, you can pass the data-slide-to with a 0-based slide mark.

The data-ride= "Carousel" property is used to mark the Carousel component that starts after the page loads.

Through JavaScript

To start the Carousel component manually:

Copy Code code as follows:

$ ('. Carousel '). Carousel ()

Options

You can pass options through the Data property or JavaScript. For the Data property, the option name needs to be placed after data-, such as data-interval= "".

name	type	Default Value	Description
Interval	Number	5000	The wait time for the slide rotation. If False, the carousel does not automatically start the loop.
Pause	String	"Hover"	The mouse pauses in the slide area to suspend the carousel, and the mouse leaves to start the carousel.
Wrap	Boolean	True	Whether the carousel continues to cycle.

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 ')

Loops the frames from left to right.

. Carousel (' pause ')

Stop the carousel.

. Carousel (number)

Navigates the carousel to the specified frame (the frame subscript starts with 0, similar to an array).

. Carousel (' prev ')

Returns to the previous frame.

. Carousel (' Next ')

Go to the next frame.

Event

The bootstrap Carousel component exposes two events for monitoring.

Event Type	Description
Slide.bs.carousel	This event slide starts immediately after the method is invoked.
Slid.bs.carousel	Triggered when all slides are finished playing.

$ (' #myCarousel '). On (' Slide.bs.carousel ', function () {
//do something ...
})

The above is a small set to introduce the JS plug-in based on the production of Bootstrap carousel effect of the relevant knowledge of the case, I hope to be able to help everyone!