So far, we have everything ready to go in all of our code, but the user can't see anything.
We're going to take care of that.
So no worries about that.
We're going to take care of that in this lesson.
So going into our builder function, which we created last time, I make some space in here.
And first thing that we want to do is we want to loop through all of the images and we can use a for
loop.
There's not multiple ways to loop through contents of an array.
So this time we'll just use a for loop and looping through my images and each one of we know that my
images will have a length because it's an array.
So going down here, you can see it within the value there that it's got a length of three.
So we're going to loop through my image.
And actually this should be my image is so looping through.
We need a way to break out of the loop.
So increment X and as we loop through, we're going to create some elements on the fly.
So first of all, let's create our slide.
So this is our main slide container using document method that we're using this create element and this
is in JavaScript allows you to create elements dynamically.
So now we've created that element object.
If you want to see it, you can always log it out.
And we're not going to see anything on our page quite yet.
But you do see that it is creating these elements.
So all of these devices are being created.
We need to add in and we need to customize these debates.
So taking that slide object that we just created where it's at some attributes, that tribute that we
want to add in is a class and we want to add in my slides class and also we want to add in a feeding
class so that we can feed them from one to the other.
And we'll take care of updating the site at the styling for that next.
So now when we log those out, we see we've got a bunch of divs with some classes.
So we're getting somewhere next.
Let's add in and create some images.
So just as we created the div, we can use document and create elements.
That's always fun, creating elements, of course, creating something new that doesn't exist yet on
the page.
So within the image, let's set an attribute to the image.
And we know that with images we need to have a source for the images.
And that's what we've got contained within are my images array.
So luckily for us, we already have that value and we can use source and the value from our my images
array.
And because this is an array, so we indicate the item from the array as X, so that's where we get
the item.
And now we need to go down deeper into this.
And we know that that has an object inside and the object has a value for IMG.
So it's adding in that image and you can see that as well as we create those.
So those are the images that we're creating so nice and neatly deposited in each one of those images.
We also need to have value for our captions so we can set that up.
And again, you guessed it, creating another element dynamically.
And this elements can be a div.
And this is going to contain the caption information.
So let's add in our caption and class list add and we'll add a value for caption.
So we'll add a class for caption and we'll add some styling to that later on.
So we've got our cap and adding in some inner text to that.
And the entire text is what's already contained within the images array.
And we need to select the right value than the index and we want to output a value for caption.
You can see these as well as we're building them out and refresh and you can see that we've got the
caption values, so everything looks pretty good.
So next, what we need to do is we need to append all of those.
So the caption and the images to the slide object.
So taking that slide object and this is how you add those dynamic elements to another elements where
you do append a child.
So it's the method that we can use and we're first appending the image.
And the only thing that is different here is the order that they're going to get appended.
So if we do it in reverse, if we do cap first and then image, the cap will be above the image.
So you can see how that's going to look when we open this up, because we stated the image as the first
one we appended and then we appended another child, which was captioned.
So if we reverse the order of these statements, then that would look a little bit different.
So lastly, what we want to do is we want to append it to our slide container so we have an option.
We can select our slide container up here or we can simply use a query selector value and select that.
So let's add that in so doing documents and query selector, we need to select the element that has
the class of slide container and we want to use that same method append child and this time we want
to spend the slide to that child.
So let's see what how that looks.
So now first and lastly and finally, we should have something visual represented on the page.
So there's our image.
There's a.
Image that we're representing, and because we do have the overflow hidden, we don't see the rest of
the images that are within that slide container.
And if you do want to see the images, I'll show you a quick way to do that.
So you could just remove that and you can see that you've got all of the images are ready to go.
So we're ready to move on and loop the different images and their values and their caption information.
And you also notice that the caption information isn't showing up.
So we need to quickly before we conclude this lesson, add in a class within our style for that.
So taking our caption class that we added in and we can set a color for that text.
So how about we set it to F three, three, three and set up font size, adding in a little bit of padding
and position it as absolute so that we can specify that we want it at the bottom.
So maybe 18 picks up off the bottom and width can be 100 percent.
And that means that if we text a line center that should center those captions.
Let's see what that looks like.
So there we've got our caption on our images and you can adjust this as needed if you want to move it
closer to the bottom and if you want to make it smaller.
So right now, it's fairly large because I've got a fairly small screen that we're working off of.
So you can adjust that as needed.
Go ahead and add this and practice creating elements on the fly using the create element method and
then append those elements.
You can append them into each others, the ones that you dynamically created, as well as you can append
it to an existing one within your HTML.
So try that out and you're going to be ready for the next lesson where we create some interaction and
we also need to add in those indicators.
So that's still all yet to come.
And then, of course, we need to launch our slideshow because nothing is happening yet, although we
do see the images.