Bootstrap Carousel Tutorial

Transcription

1 Bootstrap Carousel Tutorial The Bootstrap carousel is a flexible, responsive way to add a slider to your site. Bootstrap carousel can be used in to show case images, display testimonials, display videos, special messages to site visitors or any content that you believe is important to display to your site visitors in one place. A Carousel empowers you to display a lot of information to a site visitor in a controlled manner within the same screen real estate. NOTE: To include this plugins functionality, you will need carousel.js. If you are using bootstrap.js OR bootstrap.min.js this plugins JavaScript is included. NOTE: Nested carousels are not supported. NOTE: The.active class needs to be added to one of the slides. Otherwise, the carousel will not be visible. Usage 1) Via data attributes: Use data attributes to control the position of the carouse easily. a. Attribute data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. b. Use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0. c. The data-ride="carousel" attribute is used to mark a carousel as an animation starting at page load. 2) Via JavaScript: The carousel can be manually called with JavaScript as below: $('.carousel').carousel() Example of a simple Image Carousel: To implement the carousel, you just need to add the code as shown in codespec 1 to your webpage at an appropriate place. <!-- #divcarousel STARTS --> <div id="divcarousel" class="carousel slide" data-ride="carousel"> <!--.carousel-indicators STARTS --> <ol class="carousel-indicators"> <li data-target="#divcarousel" data-slide-to="0" class="active"></li> <li data-target="#divcarousel" data-slide-to="1"></li> <li data-target="#divcarousel" data-slide-to="2"></li> <li data-target="#divcarousel" data-slide-to="3"></li> </ol> <!--.carousel-indicators ENDS --> 1

2 <!--.carousel-inner Wrapper for slides - STARTS --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/slider/1.jpg" alt=""> <!-- 1st carousel ENDS --> <img src="images/slider/2.jpg" alt=""> <!-- 2nd carousel ENDS --> <img src="images/slider/3.jpg" alt=""> <!-- 3rd carousel ENDS --> <img src="images/slider/4.jpg" alt=""> <!-- 4th carousel ENDS --> <!--.carousel-inner Wrapper for slides - ENDS --> <!-- Controls STARTS --> <a class="left carousel-control" href="#divcarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> <a class="right carousel-control" href="#divcarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> <!-- Controls ENDS --> <!-- #divcarousel ENDS --> Codespec 1 2

3 The output of the above code is as shown in diagram 1. Diagram 1 Example of an Image Carousel With Caption: To add the caption with the Bootstrap Carousel, you just need to add the code as shown in codespec 2. <!-- #divcarousel2 STARTS --> <div id="divcarousel2" class="carousel slide" data-ride="carousel"> <!--.carousel-indicators STARTS --> <ol class="carousel-indicators"> <li data-target="#divcarousel2" data-slide-to="0" class="active"></li> <li data-target="#divcarousel2" data-slide-to="1"></li> <li data-target="#divcarousel2" data-slide-to="2"></li> <li data-target="#divcarousel2" data-slide-to="3"></li> </ol> <!--.carousel-indicators ENDS --> <!--.carousel-inner Wrapper for slides - STARTS --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/slider/1.jpg" alt=""> <div class="carousel-caption"> Caption for slider 1 <!-- 1st carousel ENDS --> 3

4 <img src="images/slider/2.jpg" alt=""> <div class="carousel-caption"> Caption for slider 2 <!-- 2nd carousel ENDS --> <img src="images/slider/3.jpg" alt=""> <div class="carousel-caption"> Caption for slider 3 <!-- 3rd carousel ENDS --> <img src="images/slider/4.jpg" alt=""> <div class="carousel-caption"> Caption for slider 4 <!-- 4th carousel ENDS --> <!--.carousel-inner Wrapper for slides - ENDS --> <!-- Controls STARTS --> <a class="left carousel-control" href="#divcarousel2" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> <a class="right carousel-control" href="#divcarousel2" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> <!-- Controls ENDS --> <!-- #divcarousel2 ENDS --> Codespec 2 4

5 The output of the above code is as shown in diagram 2. Diagram 2 Carousel Options Name Type Default Description interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. pause string "hover" Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. wrap boolean true Whether the carousel should cycle continuously or have hard stops. keyboard boolean true Whether the carousel should react to keyboard events. 5

6 Carousel Methods Method Description Example:.carousel(options) Initializes the carousel with an optional options object and starts cycling through items. $('#parent_id_of_carousel').carousel({ interval: 4000 }).carousel('cycle').carousel('pause').carousel(number) Cycles through the carousel items from left to right. Stops the carousel from cycling through items. Cycles the carousel to a particular frame (0 based, similar to an array). $('#parent_id_of_carousel').carousel('cycle') $('#parent_id_of_carousel).carousel('pause') $('#parent_id_of_carousel).carousel(number).carousel('prev') Cycles to the previous item. $('#parent_id_of_carousel).carousel('prev').carousel('next') Cycles to the next item. $('#parent_id_of_carousel).carousel('next') Example of an Image Carousel With Method: To usage of the method with Bootstrap Carousel, you just need to add the code as shown in codespec 3. <!-- #mycarousel3 STARTS --> <div id="mycarousel3" class="carousel slide"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#mycarousel3" data-slide-to="0" class="active"></li> <li data-target="#mycarousel3" data-slide-to="1"></li> <li data-target="#mycarousel3" data-slide-to="2"></li> </ol> <!-- Carousel items STARTS --> <div class="carousel-inner"> <div class="item active"> <img src="images/slider/2.jpg" alt=""> <img src="images/slider/3.jpg" alt=""> 6

7 <img src="images/slider/4.jpg" alt=""> <!-- Carousel items ENDS --> <!-- Controls STARTS --> <a class="left carousel-control" href="#divcarousel2" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> <a class="right carousel-control" href="#divcarousel2" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> <!-- Controls ENDS --> <div class="carouselbtn"> <input type="button" class="btn start-slide" value="start"> <input type="button" class="btn pause-slide" value="pause"> <input type="button" class="btn prev-slide" value="previous Slide"> <input type="button" class="btn next-slide" value="next Slide"> <input type="button" class="btn slide-one" value="slide 1"> <input type="button" class="btn slide-two" value="slide 2"> <input type="button" class="btn slide-three" value="slide 3"> <!-- #mycarousel3 STARTS --> <script type="text/javascript"> $(function(){ // Initializes the carousel $(".start-slide").click(function(){ $("#mycarousel3").carousel('cycle'); // Stops the carousel $(".pause-slide").click(function(){ $("#mycarousel3").carousel('pause'); // Cycles to the previous item $(".prev-slide").click(function(){ $("#mycarousel3").carousel('prev'); // Cycles to the next item $(".next-slide").click(function(){ $("#mycarousel3").carousel('next'); 7

8 // Cycles the carousel to a particular frame $(".slide-one").click(function(){ $("#mycarousel3").carousel(0); $(".slide-two").click(function(){ $("#mycarousel3").carousel(1); $(".slide-three").click(function(){ $("#mycarousel3").carousel(2); </script> Codespec 3 The output of the above code is as shown in diagram 3. Diagram 3 8

9 Using the default bootstrap carousel, we created a testimonial carousel example as shown in diagram 4. Diagram 4 We have also provided you with an additional slider name Nivo slider as shown in diagram 5 and diagram 6. Diagram 5 Diagram 6 9

10 If you are a competent HTML5 / CSS3 / JavaScript programmer we are sure you will be able to change the code of the web page modal window we ve written to make the code snappier and perhaps a tad shorter. Feel free to do so. If you would like to share your code with others via OpenSourceVarsity please drop us an and we d be happy to put up your code spec for download via our website. Should you have any queries about the carousel examples code do post these in the Bootstrap 3 section of the OpenSourceVarsity forum. We really do make special efforts to help, having said that, we really cannot re-write/edit code blocks for you. 10