We just learnt about the carousel component in the previous lecture. In this exercise, we're going to add in a carousel to our index.html page and in the process learn how the carousel component works. Going to index.html page, we'll add in a new row into the content div, as the first row in the div. So I'll go in and say, give div class row row-content and inside this div, we're going to create the carousel component. And in what's div I will add in the inner column div, which will contain the carousel component here. To add in the carousel, here I will add in the div with the ID my carousel and a class carousel and slide and the data ride class. So you can see the JavaScript component coming into action here, and then close off the div and start building out the carousel inside this div here. So, into this carousel, we'll add in the content of the carousel next. So I'll go in and then add another div with the class carousel-inner and the role as list box. This is the way we build up the carousel and then close that div there. And inside this div again we'll introduce divs that will host the items of the carousel by applying the carousel item class. And the first one in the carousel item... The first one in the carousel class, I will apply the active class. So this is the first div which starts out containing the starting slide there and the remaining ones, I'm going to add in. Let me add in two more carousel-item divs here and apply only the first one with the active class. Now I'm going to introduce in the content into this carousel items. So to construct a carousel item, I will go in there and then include an image with the class d-block. So this is used for, this is a flex class that allows our image to be properly positioned and then add in the image fluid class and then the source as img. So what I will do is to move in that content from the three content rows below and then add it into the carousel here. So I add in an image here and then to the carousel, I can also add in a div with the class carousel caption. In here we can include some text that will be over relayed as a caption onto the image. So I'll say carousel caption d-none, d-md-block. And then inside here, I will include the content from the content rows here. So I will go in and copy the content from the content rows here and then paste that into the carousel caption block here. And I'll remove the class that we applied to the H2 from this content. Now, we'll repeat the same thing for the remaining two by copying the content from the content rows below in here. So, let me complete that and then we'll come back and take a look at how the carousel looks like. Here you can see that I have completed the remaining carousel items here by copying the content from the content rows below. Let's add in a few CSS classes so that the carousel is nicely structured. So going to styles.css file at the bottom here, I'm going to add in a couple of more classes here. For the carousel class, I would add the background as 512DA8, which we have used before the dark colored class. And then for the carousel-item class, I'm going to add in a height as 300 pixel. And for the image that is included inside the carousel item, I'm going to apply a few transformations here. I would say, position absolute. I want to position it to the left. So this top and left zero will position this image to the top left edge of the carousel box there and with a minimum height set to 300 pixel to match the carousel-items height. So this image will essentially stretch the entire height of the carousel but will be positioned to the left edge of the carousel box here. So let me save the changes. We'll just go and have a look at what this carousel looks like on our web page. Going to the web page, you can now see that carousel in action on our index study table page. So you can see that the carousel is positioned at the top here and then we'll keep scrolling at regular intervals. Note how by using the CSS classes, I have styled the background from the carousel such that the captions are clearly visible in the carousel and also how the image has been positioned on the carousel. The height of this carousel slide is fixed at 300 pixel. So, this gives a nice clean layout for this carousel. Now, let's add in a few controls for this carousel. Going back to index.html. Right after the carousel in our box here but still inside the carousel, I'm going to add in an OL to introduce a few manual controls for the carousel. And with the class carousel-indicators. These indicators will be positioned on the carousel slides to indicate which particular slide is currently being shown. So let me introduce in the content here so I say OL, I use the OL for this. And then, inside there I use the list with the data-target set to my carousel. So this is the ID of the carousel and data-slide-to. And the first indicators will slide to slide number zero. With that class as active for the first item in this list, then the remaining two items I'm going to simply use list with the data-target set equal to my carousel and the data-slide-to is set to one. So, this is for the second slide there. I'm just going to copy this one and then create the third indicator indicator in here. So we'll go in and copy this and then change this to data-slide-to two. So we have free slides in our carousel so three indicators are sufficient enough. Now, we'll also add in a couple of controls to this carousel which allows us to manually scroll the carousel. To do that, I will introduce an A with the class carousel-control-prev here. So this would allow me to go to the previous slide, make the href equal to mycarousel, so you can see that we are trying to target the carousel there and the role is a button. So this is going to act as a button and data-slide as previous. So within this A, I will introduce a icon to represent this control on the screen. So, I'll say, span class carousel-control-prev-icon and close off the span here. I will now copy this control. And paste it here and then create the control for the next slide here so I would say, carousel-control-next and roll is a button and the data slide used to next and the icon would be carousel-control-next icon. So adding these into my carousel, let's go and take a look at our carousel at this moment. Going to the carousel, you can now see that in my carousel I have three indicator buttons here, which indicate which particular slide is currently visible in my carousel and as the slides slide, then the indicator also correspondingly changes to indicate which particular slide is visible. I can manually click on one of them and go to the specific slide in the carousel. Not only that, you can see that there are now two indicators, the left and right, which I can use to again scroll through the carousel by clicking on these indicators here. So using these controls, both the previous and the next control and the the indicators here, I can navigate to the specific slide in my carousel. This completes this exercise. This is a good time for you to do a git-commit with the message carousel.
