Welcome back in this lesson, we're going to be setting up our code and our HTML for our JavaScript
slideshow, which we're going to be developing over the next set of lessons.
So first of all, open up your editor and let's create our HTML classes.
So setting up a div and this is going to be where our main slide container is going to be.
So we could just call it a slide container and set a class of slide container for that div.
And we also need some indicator buttons so we can call this one indicator class and we'll leave them
blank as we're going to be populating all of the contents using JavaScript.
We also need to apply some styling to these elements in order to make them look better.
So we're going to have a class we can call that class my slides and initially we're going to do a display.
None for the slides.
This will give us a way to hide elements on the page.
So display none.
We also need our slide container.
So we apply a little bit of styling to that as well.
So apply some styling to style slide container.
We'll give it a width, so we'll do a preset width of 800 pics and you can customize these as needed,
a height of 400 pics.
So ideally this is the size of images that you would be placing in within the slider as well.
So that's for best effects.
It's always best to have the right images will center this element.
So just using margin auto that will center it and overflow will hide the overflow of the element.
And for the images that are contained within slide container, we'll set some values for that as well.
So any of the IMG tags that are going to be sitting with inside it will set a width of one hundred percent
for each one of those and also a height of one hundred percent.
So it'll take up the full available space within the slide container or any one of the elements, the
images that we create.
We also need a few dots that we can utilize in order for the indicator.
So these are the indicator dots so we can give it a class of dot, set a height.
So these are just little round dots that we're going to use.
And with so we've got a height of twenty five picks, it's also set a width of 25 picks and I'm trying
to work through this fairly quickly and of course you can set the different values as needed.
I set margin of zero right now, setting a background.
We'll do a background color for this one.
So background color can be fairly light color, border radius, so this is to make them around, so
if we do 50 percent, that will make them round and we're going to use display and inline block so that
we can use device and we can have them displayed next to each other horizontally.
And also we're going to make them clickable.
So adding in cursor of pointer on them so that the user knows that they can click that and they can
make some type of interaction.
So the idea is that we're going to have a bunch of these dots within the indicator element and all of
those dots are going to represent one of the images that's available that we're going to, of course,
be building out with our JavaScript.
And those are going to be all clickable.
So you can select number three and we'll bring you to image number three.
Also, let's set up one last class before we conclude and this is going to be the indicator class.
And within here, we'll give it a margin of top so that there's some spacing from the indicator and
the slide container and setting the text aligned to center a line.
So have the text in the middle.
So essentially we're going to have the dots in the middle and give it a one hundred percent.
So that takes up all the available spacing on the page.
So essentially what this is going to do is this is going to align the dots that we're going to use within
the indicator center, align those as we build it out with JavaScript.
So I think we're ready.
So if we refresh the page, we don't see anything yet because we haven't added any JavaScript code.
And JavaScript is what we're going to use in order to build everything out into the page and update
the content within the HTML elements.
So that's coming up in the next lesson.
So for now, set up your HTML.
Add in some styling to these and you're going to be ready to move on to the next step where we're going
to add each JavaScript in order to make interaction and dynamic content appear on our page.