1
00:00:00,880 --> 00:00:06,280
Welcome back in this lesson, we're going to be setting up our code and our HTML for our JavaScript

2
00:00:06,280 --> 00:00:10,330
slideshow, which we're going to be developing over the next set of lessons.

3
00:00:10,570 --> 00:00:16,350
So first of all, open up your editor and let's create our HTML classes.

4
00:00:16,630 --> 00:00:21,460
So setting up a div and this is going to be where our main slide container is going to be.

5
00:00:21,480 --> 00:00:26,370
So we could just call it a slide container and set a class of slide container for that div.

6
00:00:26,680 --> 00:00:35,170
And we also need some indicator buttons so we can call this one indicator class and we'll leave them

7
00:00:35,170 --> 00:00:39,460
blank as we're going to be populating all of the contents using JavaScript.

8
00:00:39,700 --> 00:00:45,230
We also need to apply some styling to these elements in order to make them look better.

9
00:00:45,580 --> 00:00:52,000
So we're going to have a class we can call that class my slides and initially we're going to do a display.

10
00:00:52,000 --> 00:00:53,400
None for the slides.

11
00:00:53,800 --> 00:00:56,680
This will give us a way to hide elements on the page.

12
00:00:56,690 --> 00:00:57,550
So display none.

13
00:00:58,030 --> 00:01:00,430
We also need our slide container.

14
00:01:00,430 --> 00:01:02,980
So we apply a little bit of styling to that as well.

15
00:01:03,760 --> 00:01:07,350
So apply some styling to style slide container.

16
00:01:07,390 --> 00:01:13,810
We'll give it a width, so we'll do a preset width of 800 pics and you can customize these as needed,

17
00:01:14,290 --> 00:01:16,000
a height of 400 pics.

18
00:01:16,270 --> 00:01:21,810
So ideally this is the size of images that you would be placing in within the slider as well.

19
00:01:21,820 --> 00:01:23,470
So that's for best effects.

20
00:01:23,470 --> 00:01:27,560
It's always best to have the right images will center this element.

21
00:01:27,580 --> 00:01:33,790
So just using margin auto that will center it and overflow will hide the overflow of the element.

22
00:01:33,970 --> 00:01:39,670
And for the images that are contained within slide container, we'll set some values for that as well.

23
00:01:39,670 --> 00:01:45,820
So any of the IMG tags that are going to be sitting with inside it will set a width of one hundred percent

24
00:01:45,820 --> 00:01:50,170
for each one of those and also a height of one hundred percent.

25
00:01:50,440 --> 00:01:55,420
So it'll take up the full available space within the slide container or any one of the elements, the

26
00:01:55,420 --> 00:01:56,550
images that we create.

27
00:01:56,830 --> 00:02:01,810
We also need a few dots that we can utilize in order for the indicator.

28
00:02:01,840 --> 00:02:06,460
So these are the indicator dots so we can give it a class of dot, set a height.

29
00:02:07,160 --> 00:02:09,790
So these are just little round dots that we're going to use.

30
00:02:11,170 --> 00:02:17,380
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

31
00:02:17,380 --> 00:02:23,710
to work through this fairly quickly and of course you can set the different values as needed.

32
00:02:23,800 --> 00:02:28,420
I set margin of zero right now, setting a background.

33
00:02:28,720 --> 00:02:30,490
We'll do a background color for this one.

34
00:02:31,400 --> 00:02:38,720
So background color can be fairly light color, border radius, so this is to make them around, so

35
00:02:38,720 --> 00:02:45,200
if we do 50 percent, that will make them round and we're going to use display and inline block so that

36
00:02:45,200 --> 00:02:49,810
we can use device and we can have them displayed next to each other horizontally.

37
00:02:50,060 --> 00:02:52,010
And also we're going to make them clickable.

38
00:02:52,160 --> 00:03:00,740
So adding in cursor of pointer on them so that the user knows that they can click that and they can

39
00:03:01,250 --> 00:03:02,690
make some type of interaction.

40
00:03:02,870 --> 00:03:07,820
So the idea is that we're going to have a bunch of these dots within the indicator element and all of

41
00:03:07,850 --> 00:03:12,020
those dots are going to represent one of the images that's available that we're going to, of course,

42
00:03:12,020 --> 00:03:14,030
be building out with our JavaScript.

43
00:03:14,220 --> 00:03:16,280
And those are going to be all clickable.

44
00:03:16,280 --> 00:03:19,690
So you can select number three and we'll bring you to image number three.

45
00:03:20,060 --> 00:03:27,020
Also, let's set up one last class before we conclude and this is going to be the indicator class.

46
00:03:27,020 --> 00:03:33,230
And within here, we'll give it a margin of top so that there's some spacing from the indicator and

47
00:03:33,230 --> 00:03:38,500
the slide container and setting the text aligned to center a line.

48
00:03:38,510 --> 00:03:39,710
So have the text in the middle.

49
00:03:39,740 --> 00:03:43,310
So essentially we're going to have the dots in the middle and give it a one hundred percent.

50
00:03:43,490 --> 00:03:46,370
So that takes up all the available spacing on the page.

51
00:03:46,640 --> 00:03:51,350
So essentially what this is going to do is this is going to align the dots that we're going to use within

52
00:03:51,350 --> 00:03:54,900
the indicator center, align those as we build it out with JavaScript.

53
00:03:55,250 --> 00:03:55,980
So I think we're ready.

54
00:03:55,990 --> 00:04:00,980
So if we refresh the page, we don't see anything yet because we haven't added any JavaScript code.

55
00:04:01,100 --> 00:04:07,310
And JavaScript is what we're going to use in order to build everything out into the page and update

56
00:04:07,310 --> 00:04:09,760
the content within the HTML elements.

57
00:04:09,770 --> 00:04:11,910
So that's coming up in the next lesson.

58
00:04:12,260 --> 00:04:15,140
So for now, set up your HTML.

59
00:04:15,170 --> 00:04:20,570
Add in some styling to these and you're going to be ready to move on to the next step where we're going

60
00:04:20,570 --> 00:04:26,450
to add each JavaScript in order to make interaction and dynamic content appear on our page.