Hello everyone and welcome back to our bootstrap course.
In this lecture we're going to be building a carousel for our Web site.
Now in the previous lecture we left off with our fixed now bar.
As you can see I'm scrolling with the nav bar is still there and we also built the NAV here.
This main section of our site is the head or the NAV.
And as you know as we scroll down and we're going to be seeing this white background here which we don't
want.
Let's go ahead and fix that right now.
Just open up to each terminal tab here and why this is occurring is because we assigned a full page
class to our NAV here.
Full page means we set it to be 100 V H.
So one hundred of the viewport height.
And typically whenever you work with the viewport height Number one it's not supported with all browsers.
And number two it has some responsibility issues like as you can see depending on the viewport height
if the browser calculates the viewport height incorrectly then you can have these issues.
So we typically want to only use if you put height when we need to.
Percentages are better and we are going to be using viewport height for setting the height of elements
that would otherwise be small on default.
But this block itself it won't be small on defaults.
So we can actually just remove the full page class.
And as you can see that will remove this issue here.
I'm going to close the issue tab that will remove the white spacing down there.
And now we are seeing the whole section here.
So those look great as you can see we quickly built up our Web site so far with this button and with
automatic bootstrap styling we built it quite quickly.
So let's open the HMO tab again and start working on the next element we have here now close the output
for now.
We just finished up that section of services overview and now we're going to work on the featured products
carousel.
So as you can imagine this is going to be the carousel.
So let's go ahead and start building that out.
Now this carousel is going to show different services and products depending on the company.
So we have an idea future products carousel.
Let's also give it a class using a bootstrap class.
So using carousel will make the bootstrap class of Carousel.
And you can put in a slide so that the bootstrap class will be also of type slide so the carousel will
be a slide carousel.
We also have to add data ride feature which is going to be carousel as well.
If you can the output you won't see anything yet because we have to put in the images or place holders
that we want to be inside of the carousel.
So we're going to work on next.
Now that we've set up our bootstrap classes and this div will now be considered a carousel.
So we're going to do first is set up an order list that will show the carousel indicators.
So this will allow the user to click on arrows pointing left and right to flip through the carousel.
Although they were flipping through a book of your products.
OK.
So I'm going to set up an ordered list which means it is numbered 0 L stands for ordered list.
And this is an E UML tag.
But then the class we will make a bootstrap class known as carousel indicators.
And let's go ahead and immediately close off that ordered list tag inside of in of a list ordered or
unordered.
We need to put in list items so we can open ally for list items.
And the first list item will be the first target.
So we have to set the data target
and we're going to set that to featured products carousel.
This is the idea that matches right up here and that represents the Target data and where it's located.
Because remember these are gonna be indicators that will allow us to click through.
OK.
So now we also have to set the data slide to 0.
So this means that it will slide to the zeros data in the care of souls of the very first image in the
Carousel because javascript uses zero based indexing which means all counting begins at 0 not 1.
So this will slide to the zero element the zero page in the carousel and I'm gonna set the class to
active and that means that the first element will always be active in the Carousel whenever the user
scrolled down to it.
OK.
And we've closed off that list tag out of space.
Okay great.
Now we have that opened and closed.
Let's go ahead and add another list item here.
We're going to use the exact same format list data target equals hash tag featured products carousel
with the data slide to this time it's going to be one.
So you're going to need one of these target lists items for each of the pages in your carousel.
In our case we're going to have three different products.
So we're going to add three different list items from 0 to 2 0 1 2 that will be three items.
Let's use the exact same format to set up the data target list item for the third product with the same
I.D. feature products carousel.
We have to set the targets so that the list item knows where it should go to.
This is similar to setting up an anchor because you're setting a target at an I.D..
Okay.
And from data slide to in this case whenever this indicator is clicked on it can be sliding to the second
index.
So the third item and let's close that with item as well.
Great.
And the order list is already closed.
So this is all that we need to set up the indicators.
Now we can actually set up the carousel itself.
So the inside of the carousel we can set up the pictures we want to show or the videos want to show
or placeholders want to have et cetera.
Anything you want in the carousel.
OK.
So how we do that we're gonna use again bootstrap classes.
So we have an ordered list.
Now we're going to set up another bootstrap class known as carousel inner and Carousel in our will allow
you to put inside items carousel items.
So it's open out with div class equals carousel.
And we can go ahead and close that immediately as well.
So this will hold all of our items.
So let's go ahead and make another day of class.
Class equals carousel item.
This means that this div will contain a carousel item.
Let's go ahead and close that.
Immediately we can also add an active because this will be the first item you're going to add image
container which will allow you to put inside images.
OK.
So we have that closed.
Let's add a comment here noting what each one is
it's useful to add comments to tell you what each closing div tag represents
OK.
And this last Dave is our featured products carousel
featured products.
OK great.
So now we have one carousel item.
We're also going to have multiple ones.
So let's go ahead and those as well.
You can go ahead and just copy this whole code here and paste it right below.
But this time because it's for the second item we don't need it to be active.
And we also don't need this image container.
If we're not putting images yet we can leave it there as a reminder.
OK.
We have a second item here and we'll go ahead and copy that.
To make the third item.
So now we have the carousel in our class which means that we're making the inside of the carousel and
we have three items.
The output won't show anything yet because we haven't actually put in anything into the items we haven't
put in any images or text et cetera.
So we're gonna be working on that in the next lecture because this has been enough for an hour to set
up the template and you can populate this with anything you want.
I challenge you to try populating yourself before we dive into populating it together in the next lecture.
Thank you all for watching.
Congratulations on making it this far.
And we will see you in the next lecture.