Bootstrap's picture Carousel sample code _javascript Tips

Example one:

Insert JS and CSS support:

<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= "Mycarousel" class= "Carousel Slide" > <!--Carousel (carous EL) Indicator--> <ol class= "carousel-indicators" > <li data-target= "#myCarousel" data-slide-to= "0" cl Ass= "Active" ></li> <li data-target= "#myCarousel" data-slide-to= "1" ></li> <li dat
        a-target= "#myCarousel" data-slide-to= "2" ></li> </ol> <!--Carousel (Carousel) Project--> <div class= "Carousel-inner" > <div class= "Item Active" >  </div> <div class= "Item" >  </div> <div class=" Item ">
         </div> </div> <!--Carousel (CarouSEL) Navigation--> <a class= "Carousel-control left" href= "#myCarousel" data-slide= "prev" >‹</a> <a class= "Carousel-control right" href= "#myCarousel" data-slide= "Next" >›</a> </div&gt 
    ; </div>

Example two:

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>

So, you put the items you want to render (such as images) in a circular order in the "Carousel-inner" div, creating the navigation of the entries through the <!--Carousel Nav-->. It uses the custom data property "Data-slide" to navigate to the previous and next entries.

You must refer to the jquery.js and bootstrap-carousel.js files in the HTML file where you want to create the carousel.

Bootstrap instance of a carousel

<! DOCTYPE html> 
 
 

page-flipping instance with old and new

<! DOCTYPE html>  

Using Javascript

You can use the following JavaScript code to create a carousel.

$ ('. Carousel '). Carousel ()

Here are the options you can use

interval: Specify the wait time for the slide rotation in milliseconds. The value is of type number, and the default value is 5000. If False, the carousel does not automatically start the loop.

pause: stipulates that when the mouse stops in the slide area that pauses the carousel, the mouse leaves starts the carousel. The value is of type string and the default value is ' hover '.

Here are the carousel methods you can use

. Carousel (Options): Initialize the Carousel component, accept an optional object type options parameter, and start the slide loop.
$ ('. Carousel '). Carousel ({
 interval:2000//in Milliseconds
})
. Carousel (' Cycle '): Loop The frames from left to right.
$ ('. Carousel '). Carousel (' cycle ');
. Carousel (' pause '): Stop the Carousel.
$ (' #myCarousel '). Hover (function () { 
 $ (this). Carousel (' Pause ') 
}
. Carousel (number): Navigates the carousel to 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 (' prev '): Moves the carousel to the previous frame.

. Carousel (' Next '): Moves the carousel to the next frame.

Here are two events to enhance the functionality of the carousel.

Slide: This event is immediately triggered when the slide instance method is invoked.

Slid: This event is triggered when all the slides have finished playing.