In the previous lesson, we applied our styling and also added in our HTML elements.
Now, sometimes it is easier to build out a little bit of the application and then apply the styling.
And in this case, you can also apply the styling that suits your needs, adjusted the slide container
to be 80 percent by 60 percent.
So we've on a percentage basis so that we can see it within the smaller screen size area and we don't
have any overlapping in its outside of the page.
And of course you can adjust this as needed for your own project.
So now going into our JavaScript, we need to set up some variables and one of the variables is going
to set some global variables.
So we need to track what the slide index is.
So where the slide is currently at.
We're going to start at zero and the slides are going to be the same as an array.
We're going to start it at zero, then one, two, three, four, or however many images we have.
We want to make this as dynamic as possible.
We also need a timer.
So this is where we can set our intervals and we can also clear out intervals.
We're going to need to clear out intervals.
If the user is hitting the dots within the indicator and moving to the next slide automatically, we're
going to have to clear the interval of the timer that is automatically progressing our slides or set
that up as well.
And next and last.
But of course, not least we need to load a bunch of images so these images can be a const because we're
not updating them and we can create an array called my images.
And this is actually going to be an array with objects inside so we can contain multiple values that
we can utilize within our within our index items.
So first of all, we're going to need an image in order to display an image.
We need an image.
We need an image path or going to be using placeholder dot com and there a great resource if you are
developing an application and you need some images, some placeholder images.
So this is a great, excellent resource to provide those.
So I've just added in and this image is going to be a specific color and it's going to have a text of
one image on it.
We also want to have captions and you can customize these as needed.
So I'm going to create within the object to create a name called caption, and then this can be a descriptor
for that image or it could be whatever you want it to contain.
So right now, we'll just put some dummy content in there.
So a comma separated out and you can create as many of these as you need.
And in this case, I believe, will probably just create three of them and we'll update the images to
be slightly different.
So they're not all the same.
And we can tell them apart and they can also have different caption contest, so on, and we'll make
them look slightly different.
So this one will update the color.
So it's a little bit darker there color.
So set it up one and see what that looks like.
You could customize this and obviously you're going to have your own images that you're going to be
placing within this object.
And this is going to be fully dynamic.
So we're going to build out the content of the page, all of our slide content using this, my images
object array.
So placing in the path of the image and adding in a caption and you can add as many of these as needed.
So once we've built that out, we're ready to build out all of our content, our visible content area
for our user.
And we're going to launch a function called build.
And then just below we'll set that function up so that there's our builder function console log.
We can log it to my images object so that we can see that within the console.
So go back refresh and you can see that we've loaded all of the object information and it's all nicely
compacted into a nice object array.
So we've got array length, which is three items in there, and these items within an array, you can
use different types of data types so you can use numbers, text booleans and you can use arrays as well
as well as objects.
And in this case, objects are best suited because they provide us the ability to have more of a consistent
format where we've got an image and a caption and any other data that we want to keep track of, we
could output in this type of format.
So now it's up to you.
Go ahead and listen to your project.
Set up the some of the default global variables that we're going to create.
Your array object, my images, objects you can add in your own or you could use placeholder and then
invoke a function called builder and set up some default content within that function.
And you're ready to move on to the next lesson.