Home > Developer > JavaScript
Sample Code of Bootstrap image carousel,
Example 1:
Support for js and css insertion:
<link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/jquery-1.9.1.min.js"></script><script src="js/bootstrap.min.js"></script>
HTML code:
<Div id = "pictures" class = "item"> <div id = "myusel" class = "carousel slide"> <! -- Carousel) indicator --> <ol class = "carousel-indicators"> <li data-target = "# myCarousel" data-slide-to = "0" class = "active"> </ li> <li data-target = "# mydomainusel" data-slide-to = "1"> </li> <li data-target = "# mydomainusel" data-slide- to = "2"> </li> </ol> <! -- Carousel) project --> <div class = "carousel-inner"> <div class = "item active"> </div> <div class = "item"> </div> <div class = "item"> </div> </div> <! -- Carousel) navigation --> <a class = "carousel-control left" href = "# myCarousel" data-slide = "prev"> controls </a> <a class = "carousel-control right "href =" # myCarousel "data-slide =" next "> › </a> </div>
Example 2:
Usage
<div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div>
Therefore, you place the entries (such as images) You want to present in a circular order in the "useusel-inner" div, through "<! -- Define usel nav --> "Create a navigation bar. It uses the customized data attribute "data-slide" to navigate to the previous and next entries.
You must reference the HTML file where you want to create the carouselJquery. jsAndBootstrap-carousel.jsFile.
Bootstrap carousel instance
<!DOCTYPE html>Paging instances with old and new
<!DOCTYPE html>Use Javascript
You can use the following JavaScript code to create a carousel.
$('.carousel').carousel()Below are the options you can use
Interval:Specifies the wait time for slide rotation, in milliseconds. The value type is number. The default value is 5000. If this parameter is set to false, the loop does not start automatically.
Pause:It is required that when the mouse stays in the slide area, the slideshow is paused. When the mouse leaves, the slideshow is started. The value type is string, and the default value is 'hover '.
The following describes the carousel method that you can use.
. Repeated usel (options): initializes the carousel component, accepts an optional object-type options parameter, and starts a slide loop. $ ('. Carousel'). carousel ({interval: 2000 // in milliseconds}). carousel ('cycle'): loops frames from left to right. $ ('. Stopped usel'). Stopped usel ('cycle');. Stopped usel ('pause'): Stop carousel. $ ('# Mydomainusel '). hover (function () {$ (this ). carousel ('pause ')}. carousel (number): locates the carousel on the specified frame (the frame subscript starts with 0, similar to an array ). $ ("# Carousel_nav"). click (function () {var item = 4; $ ('# home_carousel'). carousel (item); return false ;});. Carousel usel ('prev'): forwards the carousel to the previous frame.
. Carousel usel ('Next'): transfers the carousel to the next frame.
Two events are used to enhance the carousel function.
Slide: this event is triggered immediately after the slide instance method is called.
Slid: this event is triggered after all slides are played.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
