Bootstrap makes building a carousel control a breeze. For Bootstrap carousel to work, we should include Jquery and Bootstrap's javascript module.

Carousel has 3 parts:
1. Slider
2. Slider Controls
3. Indicators 

**To setup Bootstrap:**

http://getbootstrap.com/docs/3.3/getting-started/#download




https://app.egghead.io/api/v1/lessons/css-build-a-carousel-control-using-bootstrap/subtitles

Build a Carousel Control using Bootstrap

[00:01] I've got a simple HTML page set up. I've included all the CSS and JavaScript files necessary to set up Bootstrap. We'll start with the container. We'll give it a heading, Calling Carousel Using Bootstrap. Then we'll start up with the actual carousel.

[00:25] We'll make a division with carousel as a class. As you can see, the carousel has three main parts -- the background image, the left and right controls, and some indicators over here. Let's make space for them. The indicators will go over here, then will come our images, and then our controls.

[00:58] Before making our indicator and controls, let's set up our images. We'll make a division with the class carousel-inner. This is how Bootstrap identifies where the sliding images are. Each image can be put into a division called item. We are making three divisions with the class item.

[01:20] Then we'll pre-populate each item with image. I already have three images set up in my root folder, so I'll just include them.

[01:28] If we go ahead and check our page, you can see that there is no carousel displayed over here. That is because to display one of these images, Bootstrap requires it to be attached with a class active. Let's make one of these active. If you refresh this page, you can see that the carousel is now visible.

[01:56] If we want a carousel to display animations automatically, we can go ahead and add a class slide, and also give it an attribute of data-ride="carousel." Now, if you refresh the page, you can see that the animations will start playing automatically.

[02:15] The slide class contains the animations required by the carousel control. The data-ride attribute will ensure that the carousel starts animating as soon as the page is loaded.

[02:27] Now, let's start creating our left and right controls. We'll use hyperlinks for the left and right controls, and we'll give them a class of carousel-control. We'll make two of them for each, left and right one. Let's give them a href of carousel, and give this left, and href of carousel, and this one as right.

[03:01] As you can see, we've created two hyperlinks with class as carousel-control, and with left and right inside them.

[03:09] As you can see, they both are overlapping on each other. We can quickly fix them by giving them classes of left and right. This should fix the issue, and you can see that the left indicator is on the left, and the right indicator is on the right.

[03:24] If you go ahead and click the left and right, you can see that nothing is happening. That is because we need to actually wire the events from the hrefs to the carousel itself. For that to happen, the href should be equivalent to the ID of the carousel. Let's give it an ID of carousel.

[03:46] Also, it takes in a data-slide attribute. The data-slide attribute is used to mention the direction from which the image will slide in. Now, if you go ahead and test this, as you can see, when we click on left, the image will slide in from the left, and when we click on right, the image will slide in from the right.

[04:11] Now, we can make this a bit more interesting by using glyphicons. Let's make a slide span with class of glyphicon, without a dash. Also, we'll use the same for the right one. We'll use a glyphicon of chevron-left, glyphicon-chevron-left.

[04:34] Now, if you refresh the page, we can see that we have a nice left indicator over here. We can do the same with the right, and use chevron-right. If we refresh the page, you can see that we have two nice indicators over here. Let's go ahead and build our indicators.

[05:01] For this, we'll use another list with a class of carousel-indicators. Inside this, we'll have three list items for three indicators. Each list item should have a data target, and this one, we'll set to our carousel. We can copy this into all our list items.

[05:30] We also need to specify an attribute, data-slide-to, to mention to which image the indicator should slide to. Let's give the zero, and copy this into our other list items. Let's give this a data-slide-to one, and for this, two.

[05:52] You can see that there is a problem. That is because I've spelt carousel wrong. If we refresh this, you can see that we have three indicators, but none of them is highlighted. For the highlighting to work, we need to give at least one of them a class of active. Bootstrap 3 uses a lot of these active class pattern, so make sure you get hold of it.

[06:15] Now, if we refresh our page, you can see that we have an active indicator, and when we click on each of these indicator, you can see that the events are wired up properly, and we can navigate to the exact image.

Build a Carousel Control using Bootstrap

Share this video with your friends