In this lesson we'll be creating a bootstrap carousel the carousel is a plugin that cycles through HMO
elements.
It is typically used for slide shows as seen in this example.
We have a series of car pictures each car picture is displayed one at a time before automatically transitioning
to the next picture.
Each picture also has a title and a description.
We can manually cycle through the images by clicking the left or right links
or by clicking the carousel indicators
to make a carousel.
We first start with a do and give the divine.
We have given the I.D. We have given this div the I.D. carousel.
This is important and will be used later on for the carousel controls so although we've named the I.D.
care so you can call it whatever you like.
Set the div class to Carousel and slide also create a data right attribute and set it to Carousel
The Carousel class specifies that the div contains a carousel the data right attribute will make it
so the images start cycling as soon as the page loads
next create an ordered list element and set the class to Carousel indicators
the carousel indicators are the small circle icons that indicate how many slides there are they also
allow users to manually toggle through the slides and provide an indication as to the active slide so
we can see here that as the images switch from one to another the carousel indicator also changes it
becomes highlighted based on the active carousel
we need to create for list items because we have four images each list item needs to have a data target
attribute set to Carousel notice that the value of this attribute points to the I.D. of our carousel
div
so here this this matches the data target matches our I.D..
For the main carousel div now each item also needs to have a data slide to attribute the value of this
attribute will define which slide to go to when that indicator is clicked so the first item will be
would go to Slide 0 the next slide 1 2 and 3.
So the numbering system does start from zero.
So slide one is actually zero and then 1 2 and 3.
We've created a class in and set it to active.
Now this is on the second item and I'm just going to.
Cut that out and paste it onto the first item.
So this will highlight the first indicator because that's where the slide show starts.
So you can see that when I refresh the page and you can see that the first indicator is active on page
refresh.
So after ordered list we have a wrapper for the slides after ordered list.
We create a wrapper for the slides created give and set the class to Carousel.
Inner create a rule attribute and set it to list box.
Now we can start creating the divs that will contain the images or content of this slideshow
created div insert 2 classes item an active next.
Create an image element and set this source to the location of your first image.
Make sure that the images images are contained in the same directory or a sub directory relative to
the location of your HMO file also specify the width and height of the image
create another div inset the class to care so caption Now create a heading for the title in a paragraph
or the description nested within the careful caption div
and that's it.
So what we can do now is we can copy and paste this entire block of code
to create the other slideshow content so here we have four images.
So each one
you can see is is more or less the same.
The code is almost identical.
All you have to change is the source of the image and the heading in description for each slide is also
different.
Also keep in mind that you only need to set the active class on one of the slides.
So that'll be the slide that is active when the page initially loads so one two three and four items
you can have as many as you like.
Once complete we can go ahead and create our left and right control links.
Start with an eight element and set the class to left carousel.
Control
create an h r you f attribute and set it to the I.D. of the main carousel div so remember we called
it carousel
create a rule attribute and set it to button and a data slide attribute and set it to previous priority.
Now to create the arrow icon.
Create a span and set the class to graphic on Glivec on Chevron left.
And that's what's gonna give us this this little icon here.
And create an area hit an attribute and set it to true
now for the second for the right side arrow you can basically copy and paste this block of code all
you have to change is instead of a left class set it to write instead of previous set it to next for
the data slide attribute
change graphic on Chevron left to ballistic on Chevron write and that's it.
Now there's just one more thing to do before we can test this in your browser.
We're gonna have to scroll up to the head tag and you're going to create a style sheet and add the following
rule
here.
The width definition will make it so that the carousel content occupies 80 percent of the carousel the
margin auto will center the content so we would increase with to 100 then we would have no margin on
the left and right side.
You can see it still works.
You still see our arrows but there's no spacing
and you can set the value from anywhere from zero to 100 percent.
And that's it.
You can now save your file and preview it in your web browser and your carousel should be working.
The carousel is responsive so if you if we would expand the size of our web browser the carousel expands
the size of our container and in this case we're using a fixed with container so if we were to use a
fluid container
it experienced the full size of the screen.
The same is true if we shrink the browser
again you can see it's fully responsive.