YouTipBootstrap V2 Carousel Plugin
In this tutorial, you will see how to create a carousel using Bootstrap. This will help you create content sliders, image galleries, and more.
So, you place the items you want to display (like images) in a cyclic order within the "carousel-inner" div, and create navigation for the items using "". It uses the custom data attribute "data-slide" to navigate to the previous and next items.
You must reference the jquery.js and bootstrap-carousel.js files in the HTML file where you want to create the carousel.
## Example
Bootstrap Pager with Next and Previous Example
body {
margin: 50px;
}
(#)
## Example
(#)
You can use the following JavaScript code to create the carousel.
$('.carousel').carousel()
Below are the **options** you can use:
* interval: Specifies the waiting time for slide rotation in milliseconds. The value type is number, and the default value is 5000. If set to false, the carousel will not automatically start cycling.
* pause: Specifies that the carousel pauses when the mouse hovers over the slide area and resumes when the mouse leaves. The value type is string, and the default value is 'hover'.
Below are the carousel **methods** you can use:
* .carousel(options): Initializes the carousel component, accepts an optional object-type options parameter, and starts the slide cycle.
$('.carousel').carousel({ interval: 2000 // in milliseconds})* .carousel('cycle'): Cycles the slides from left to right.
$('.carousel').carousel('cycle');* .carousel('pause'): Stops the carousel.
$('#myCarousel').hover(function () { $(this).carousel('pause') }* .carousel(number): Positions the carousel to a specific slide (slide index starts at 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 slide.
* .carousel('next'): Moves the carousel to the next slide.
There are two **events** to enhance the carousel's functionality.
* slide: This event is triggered immediately after the slide instance method is called.
* slid: This event is triggered after all slides have finished playing.
[Click here to download all HTML, CSS, JS, and image files used in this tutorial.](#)
