JS Component Bootstrap realize _javascript skill of picture carousel effect

Last Update:2017-01-19 Source: Internet

Author: User

Tags prev bootstrap carousel

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article is mainly to learn about JavaScript Plug-ins-Carousel. Nonsense not much said, directly into the study. Full tutorial to view: Bootstrap3.0 Tutorial

Wheel Seeding

The following is the first show of this plug-in and related components produced by the Carousel case.

<body style= "width:900px; Margin-left:auto; Margin-right:auto; " > <div id= "carousel-example-generic" class= "Carousel Slide" data-ride= "Carousel" > <!--indicators--> &L T;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--> &LT;DIV cl ass= "Carousel-inner" style= "Text-align:center" > <div class= "Item Active" >  </img> </div&

Gt

<div class= "Item" >  </img> </div> <div class= "item" >  </img>  </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> <script src= "Js/jquery-2". 0.3.min.js "> </script> <script src=" Js/bootstrap.min.js "> </script> <script type=" text/

JavaScript ">//$ ('. Carousel '). Carousel (' Next ');

 </script> </body>

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, Bootstrap does 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.

<div class= "Item Active" >



</img>

<div class= "Carousel-caption" >

For three items, add separately, then the effect will have the amount.

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.

Add to the outermost carousel container

Through JavaScript

Manually start the Carousel component (above we open the Carousel component automatically by using the Data-ride property). ）：

$ ('. 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= "".

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

$ (' #carousel-example-generic '). On (' Slide.bs.carousel ', function ()

{

alert (1);

})

This is how the event is bound for the carousel component and then executed at the appropriate runtime. This has been explained in the previous JavaScript plug-ins are also more, the form is universal, so as long as it can be used.

Image

This is a few more practical pictures of the Carousel plug-in, the effect is very good, reasonable use, will always give you the page plus points, I hope to help you learn.

If not enough, you can see these articles for in-depth study: "Bootstrap Learning Tutorial" Small series and everyone progress together!

If you want to further study, you can click here to learn, and then attach 2 wonderful topics:

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More