YouTip

The Bootstrap Carousel plugin is a flexible and responsive way to add a slider to your site. The content is also flexible enough to be images, inline frames, videos, or any other type of content you want to place. > !(#)If you want to use the plugin's functionality individually, you will need to include **carousel.js**. Or, as mentioned in the (#) chapter, you can include _bootstrap.js_ or the minified version _bootstrap.min.js_. ## Example Below is a simple slideshow using the Bootstrap Carousel plugin to display a generic component with cycling elements. To implement the carousel, you only need to add the code with the markup. No data attributes are required, just simple class-based development. ## Example [Try it »](#) The result is as follows:  ### Optional Captions You can add captions to your slides by using the **.carousel-caption** element within the **.item**. Simply place any optional HTML there, and it will be automatically aligned and formatted. The following example demonstrates this: ## Example [Try it »](#) The result is as follows:  ## Usage * **Via data attributes**: Use data attributes to easily control the position of the carousel. * The **data-slide** attribute accepts the keywords _prev_ or _next_, which alter the slide position relative to its current position. * Use **data-slide-to** to pass a raw slide index to the carousel. **data-slide-to="2"** will jump the carousel to a particular index (indexing starts at 0). * The **data-ride="carousel"** attribute is used to mark a carousel as animating starting at page load. * **Via JavaScript**: The carousel can be manually called via JavaScript, as shown below: $('.carousel').carousel() ## Options Some options can be passed via data attributes or JavaScript. The following table lists these options: | Option Name | Type/Default Value | Data Attribute Name | Description | | --- | --- | --- | --- | | interval | number _Default: 5000_ | data-interval | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | | pause | string _Default: "hover"_ | data-pause | Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. | | wrap | boolean _Default: true_ | data-wrap | Whether the carousel should cycle continuously or have hard stops. | ## Methods Here are some useful methods for the Carousel plugin: | Method | Description | Example | | --- | --- | --- | | .carousel(options) | Initializes the carousel with an optional options object and starts cycling through items. | $('#identifier').carousel({interval: 2000}) | | .carousel('cycle') | Cycles the carousel items from left to right. | $('#identifier').carousel('cycle') | | .carousel('pause') | Stops the carousel from cycling through items. | $('#identifier').carousel('pause') | | .carousel(number) | Cycles the carousel to a particular frame (0 based, similar to an array). | $('#identifier').carousel(number) | | .carousel('prev') | Cycles to the previous item. | $('#identifier').carousel('prev') | | .carousel('next') | Cycles to the next item. | $('#identifier').carousel('next') | ### Example The following example demonstrates the usage of the methods: ## Example $(function(){ $(".start-slide").click(function(){ $("#myCarousel").carousel('cycle'); }); $(".pause-slide").click(function(){ $("#myCarousel").carousel('pause'); }); $(".prev-slide").click(function(){ $("#myCarousel").carousel('prev'); }); $(".next-slide").click(function(){ $("#myCarousel").carousel('next'); }); $(".slide-one").click(function(){ $("#myCarousel").carousel(0); }); $(".slide-two").click(function(){ $("#myCarousel").carousel(1); }); $(".slide-three").click(function(){ $("#myCarousel").carousel(2); }); }); [Try it »](#) The result is as follows:  ## Events The following table lists the events used in the Carousel plugin. These events can be used as hooks in functions. | Event | Description | Example | | --- | --- | --- | | slide.bs.carousel | This event fires immediately when the slide instance method is called. | $('#identifier').on('slide.bs.carousel', function () {// do something...}) | | slid.bs.carousel | This event is fired when the carousel has completed its slide transition. | $('#identifier').on('slid.bs.carousel', function () {// do something...}) | ### Example The following example demonstrates the usage of the events: ## Example $(function(){ $('#myCarousel').on('slide.bs.carousel', function(){alert("This event fires immediately when the slide instance method is called."); }); }); [Try it »](#) The result is as follows: