Hello everyone and welcome back to our bootstrap course.
In this lecture we're going to be adding arrows to our carousel as well as displaying it and giving
it a height.
So that way we will see it.
So let's go ahead and begin that we are going to set up arrows first.
This will allow the user to click through the carousel but the carousel will move on its own as well.
So let's open an anchor class and we're going to call this carousel control previous.
That means this will create an icon inside of it.
And this will control it to move to the previous item and to set the reference.
And in this case it'll be the idea of the carousel itself which is featured products carousel as well.
We need to set the rule of this anchor which is a button and read to set the data to Slide 2 and that
will be previous to the previous data is what we're going to slide to.
Let's go ahead and close that anchor tag immediately.
That way we don't forget to.
It's common to forget to close them.
If your I.D. does not close them on your own.
OK.
Next let's actually make the icon.
So we're going to make a span class and we're going to use bootstraps.
Class known as carousel control.
Previous icon and this will make an icon on the screen.
We're going to set it's already hidden to be true.
And then let's close this span tag.
Now we're going to set the text of this icon and this is going to be a span class S.R. only and it's
going to be with the text previous.
That is everything for that icon.
We're going to follow the exact same format to make the icons for the next button and you'll see all
this when we test it in the output.
Within a class we're not using Bootstrap class carousel control next and it's going to reference or
link to the featured Prague's carousel at a specific item.
The role of this anchor is to be a button and it's going to slide to the data in the carousel.
That is next.
So the next item in the carousel.
That is why we numbered each item in the carousel.
And we can close that anchor tag immediately and inside again I'm going to follow the same structure
to add an icon.
And of course carousel control next icon.
We're going to set it to hidden as well initially.
All right.
Hidden equals true.
And let's go ahead and close that span tag and let's actually add text for our button as well.
And we're going to call it a star only again and make it next.
Let's go ahead and look at the output.
Now we don't have anything in the output except the indicators because we have to set the height of
each item in the carousel.
If we don't set the height then nothing will appear.
Because right now we just have blocks if you put in an image then it would appear.
However the image would not be sized it would just be its default size.
So you'd have to resize the image as well.
So let's go ahead and do that right now.
How we're going to do that is by using the class that we assigned to each carousel item we assigned
the item carousel item to each of the items.
Let's go ahead and set its height contests.
Different types of heights can try height 100 percent to begin and we can also use the featured products
carousel idea and we have to set its height as well to where it is with rather 200 percent.
Well set its margin to zero.
Auto that we will ensure that we have no margins on the sides which can appear when you create the default
carousel with bootstrap.
So height of hundred percent means this item will be a hundred percent of its parent.
Often you have to test different heights for responsively so 100 percent in the workbook.
Try something like 10 Ram.
Ram is another way of adding Heights and it means it is in relation to the text size.
RAM is more useful for responsively because as the text size decreases on a smaller screen so will the
item height also try something like 10 V H it's quite small.
One hundred VH under VH looks not bad.
See this is where the H comes in handy when you cannot use a hundred percent excuse me h.
So it was usually H for now.
This means it will be a hundred percent of the viewport height.
Let's go ahead and hide everything but the output and see what we have so far.
We have our fixed navigation and we have our overview of the company.
And when we click on feature we go to our carousel here which contains a carousel with these arrows
here and it contains a product with a button.
Right now each button will take you back home.
You can change later to bring it to services or somewhere else on the PJ OK.
Great.
That is everything that we need to display the carousel.
And to add some arrows to it now in the next lecture we're gonna be adding more content.
We're gonna be adding a page for each service.
That way the carousel can link to each of the products or services.
And we're gonna fill in more detail about each product.
And this will be one page each and they're going to allow the user to scroll through the page for some
extra information about the company's products.
We're gonna be doing that in the next lecture but that's everything for this lecture.
Congratulations on finishing off the carousel.
I challenge you to go ahead and add more into it.
If you would like at this stage such as an image or a video other than that we will see you in the next
lecture.
I think through watching.