1
00:00:00,180 --> 00:00:00,700
Beautiful.

2
00:00:00,750 --> 00:00:03,540
So what is the general idea behind this lighter?

3
00:00:04,050 --> 00:00:09,750
Well, we can just now get to the complete one, then we can go to the Deftones.

4
00:00:10,290 --> 00:00:18,390
And what I would want you to do is look for a section center and then remove overflown so you have sexual

5
00:00:18,390 --> 00:00:21,940
center and then just uncheck the box.

6
00:00:22,490 --> 00:00:24,030
OK, that's number one.

7
00:00:24,400 --> 00:00:34,380
Then I would want you to go to any article, just look for the opacity and then on Callick zero and

8
00:00:34,380 --> 00:00:42,280
what you should say, by the way, let me zoom out, is that we have the list correct now by default,

9
00:00:42,280 --> 00:00:46,310
all placed on my items here on the right hand side.

10
00:00:46,800 --> 00:00:48,360
So they will be placed over here.

11
00:00:48,730 --> 00:00:52,290
Then the active one will be in the center.

12
00:00:52,740 --> 00:00:57,650
And the one that was just displayed is going to be over here.

13
00:00:57,960 --> 00:01:02,880
And again, we will use smartly the indexes that we have in.

14
00:01:03,780 --> 00:01:07,460
So depending on that index, we will change that class.

15
00:01:07,860 --> 00:01:12,180
So in order for me to move those items, we're just changing the classes.

16
00:01:12,390 --> 00:01:13,860
And you can see that right away.

17
00:01:14,610 --> 00:01:18,440
If you're looking at the class names, notice how the active slide is changing.

18
00:01:18,660 --> 00:01:21,420
So that is the one that is displayed.

19
00:01:21,720 --> 00:01:24,870
And then we have the last slide, which is all the way on the left hand side.

20
00:01:25,050 --> 00:01:29,860
And then we have the next slide, which all the slides by default will have next slide.

21
00:01:30,190 --> 00:01:38,850
OK, so what success we would need to fix in our setup so at least we can start working on our react

22
00:01:38,850 --> 00:01:39,510
functionality.

23
00:01:39,930 --> 00:01:45,300
Well, let's navigate to infectiousness and learning here all the way at the bottom.

24
00:01:45,300 --> 00:01:49,160
You'll notice three classes that have been coming around.

25
00:01:49,440 --> 00:01:53,880
Then I also have commented about the opacity for the article.

26
00:01:54,150 --> 00:02:01,460
And then also if you scroll up, you'll notice my container where at the moment I have overflow, hidden,

27
00:02:01,490 --> 00:02:04,480
commented out and then I have comment already.

28
00:02:05,100 --> 00:02:06,810
So let's start with the basics.

29
00:02:07,200 --> 00:02:09,060
We have a list, correct.

30
00:02:10,020 --> 00:02:17,940
In the election center, we iterate overanalyzed, so what we could do for our parent container, we

31
00:02:17,940 --> 00:02:25,500
could set up display flex, so that is just going to line them up in one row.

32
00:02:25,860 --> 00:02:28,100
OK, good, awesome.

33
00:02:28,410 --> 00:02:35,190
Now, the problem is that right away for the article, I have the position absolute and I have the actual

34
00:02:35,190 --> 00:02:39,550
position and that's why they're setting one on top of the other.

35
00:02:39,900 --> 00:02:41,580
So what we can do is just common.

36
00:02:41,580 --> 00:02:48,120
The South for the time being, which you'll notice in the slide setup, that we have the list because

37
00:02:48,120 --> 00:02:55,430
like I said, we're using the flex one where we essentially put them in one row.

38
00:02:56,010 --> 00:03:02,820
So once we have that row, this is where I would want to use that position absolute and kind of place

39
00:03:02,820 --> 00:03:04,410
them all in a center.

40
00:03:04,890 --> 00:03:12,270
Now, there's a reason why I still want to use the flex, because I would want to move some items to

41
00:03:12,270 --> 00:03:14,510
the left and to the right.

42
00:03:14,910 --> 00:03:23,850
So if we go back and if we uncommented, you'll notice, of course, we're going back to the look where

43
00:03:23,850 --> 00:03:27,510
we have one item on top of the next one.

44
00:03:28,020 --> 00:03:35,490
So essentially what I could have is some classes where I start moving them around, where I notice the

45
00:03:35,490 --> 00:03:36,030
moment.

46
00:03:36,030 --> 00:03:39,870
Yeah, I have position absolute and are sitting exactly in the center.

47
00:03:40,230 --> 00:03:46,610
But we also have transformed property where we can start moving them left and right.

48
00:03:47,040 --> 00:03:51,090
So if we have active slide, that is of course going to be sitting in the center.

49
00:03:51,300 --> 00:03:52,280
So I'm not going to move it.

50
00:03:52,530 --> 00:03:58,770
But then the last one and the next one, this is where I'm moving in either to the left or to the right.

51
00:03:58,980 --> 00:04:04,470
Now, by default, I can tell right away that all the slides will get this next slide and then only

52
00:04:04,470 --> 00:04:07,910
the active one and the last one will get these two classes.

53
00:04:08,280 --> 00:04:14,670
So in order to test this out manually, we can navigate back to our project and we look for section

54
00:04:14,910 --> 00:04:16,150
and section center.

55
00:04:16,620 --> 00:04:21,270
And then for a few of the articles, just add that class name.

56
00:04:21,540 --> 00:04:28,740
So navigate this tag and then say class here and the class you're looking for is next and then slide.

57
00:04:29,070 --> 00:04:34,290
And once you added notice, now this guy moves all the way to the right.

58
00:04:34,560 --> 00:04:37,980
And essentially this is exactly what we're going to do by default.

59
00:04:38,190 --> 00:04:40,710
All of them will get this next slide.

60
00:04:41,040 --> 00:04:46,050
Now, if I would want to place a slide in a center, I would want to add that active slide.

61
00:04:46,080 --> 00:04:49,770
So, again, you can look for the element, then add class.

62
00:04:50,250 --> 00:04:51,860
In this case, of course, it's not just X.

63
00:04:51,880 --> 00:04:58,200
That's why we're adding the class and we'll say active and then slide the rest.

64
00:04:58,200 --> 00:05:02,220
Now there's going to be some acting on, of course, rest of them are there as well.

65
00:05:02,250 --> 00:05:04,680
That's why we cannot see much change.

66
00:05:05,560 --> 00:05:12,790
But then let's add one more four of the previous one, so for the last one, so I'm going to go here,

67
00:05:13,240 --> 00:05:18,250
I'll click again on the element and I'll say class class.

68
00:05:18,250 --> 00:05:21,220
And we're going to go with Raev Slider.

69
00:05:21,460 --> 00:05:22,690
I believe it was last slide.

70
00:05:22,700 --> 00:05:24,400
Sorry, was the last slide.

71
00:05:24,580 --> 00:05:26,500
I need to go one more time here.

72
00:05:27,250 --> 00:05:28,600
Sorry I missed that up.

73
00:05:28,600 --> 00:05:32,860
We have class, we have lost and landslide.

74
00:05:32,860 --> 00:05:38,890
And once I had that one and of course I have slide to the left as well.

75
00:05:39,250 --> 00:05:40,690
So we have a few classes.

76
00:05:40,900 --> 00:05:46,480
We have the active one, the one that is sitting in the center and we have the next slide.

77
00:05:46,480 --> 00:05:53,400
So the one that will be displayed and the last one which was just displayed or the last on in the right

78
00:05:53,800 --> 00:05:56,740
and the way will control that will have our index.

79
00:05:57,040 --> 00:06:01,050
And then depending on that index, we'll flip those classes.

80
00:06:01,330 --> 00:06:02,760
Now back to the seats.

81
00:06:02,770 --> 00:06:06,940
Has what I wanted by default is to hide them.

82
00:06:06,960 --> 00:06:08,950
That's why we have the capacity of zero.

83
00:06:09,280 --> 00:06:12,790
And also I didn't want to have the overflow.

84
00:06:13,000 --> 00:06:16,630
So that's why on the container there is this overflow hidden.

85
00:06:16,940 --> 00:06:20,950
That's why once you say notice, you cannot see those slides.

86
00:06:20,950 --> 00:06:27,130
But I also have the capacity so it only shows up once it is active.

87
00:06:27,370 --> 00:06:32,470
That's why if you check out the article here, I have the capacity.

88
00:06:32,470 --> 00:06:40,360
So make sure that you uncommented that and not only the active slide or here is going to have this opacity

89
00:06:40,510 --> 00:06:44,020
of one of the slides will be hidden by default.

90
00:06:44,320 --> 00:06:51,190
And lastly, what I would want to mention is that since we're using position absolute, you must have

91
00:06:51,190 --> 00:06:53,320
some kind of height for the container.

92
00:06:53,350 --> 00:06:56,380
So in my case, it was 450 fifty pixels.

93
00:06:57,220 --> 00:07:02,050
But just keep in mind that you'll always, always need to have some kind of height.

94
00:07:02,230 --> 00:07:07,830
Otherwise it won't work because for the absolute technically out of the normal flow.

95
00:07:08,110 --> 00:07:12,760
So if you don't set up some kind of height, everything is just going to be collapse.

96
00:07:13,210 --> 00:07:14,430
That is the main idea.

97
00:07:14,560 --> 00:07:19,000
We shouldn't see anything at the moment because we haven't had any of those classes.

98
00:07:19,000 --> 00:07:19,880
We haven't added.

99
00:07:19,900 --> 00:07:22,120
Next slide, the active slide or whatever.

100
00:07:22,510 --> 00:07:30,370
But hopefully this makes sense where we have the set up of three classes online by default.

101
00:07:30,580 --> 00:07:32,380
Essentially, we'll add this next slide.

102
00:07:32,590 --> 00:07:36,310
So we'll move all our slides to the right that are going to be here.

103
00:07:36,520 --> 00:07:45,160
But then depending on the value in our index, we will set up interactive class or the last slide class.