1
00:00:00,120 --> 00:00:05,880
And once we understand the success now, of course, let's not forget, you will react and set up our

2
00:00:05,880 --> 00:00:06,610
functionality.

3
00:00:07,140 --> 00:00:13,410
Now I'll leave this one still open because I will navigate back and toggle some classes.

4
00:00:13,770 --> 00:00:22,200
So in the app and jayesh, what I would want is when we're iterating over the list, then like I said,

5
00:00:22,410 --> 00:00:26,250
I would want to start adding these classes to my article.

6
00:00:27,000 --> 00:00:28,230
Like I already previously mentioned.

7
00:00:28,440 --> 00:00:32,390
By default, they will all get next slide.

8
00:00:32,580 --> 00:00:34,590
So I'm going to go with that position.

9
00:00:36,020 --> 00:00:41,810
And that one will be equal to the next slide strength.

10
00:00:42,080 --> 00:00:47,780
Now, the name here is important because it needs to match the class, because what I'm going to do

11
00:00:48,080 --> 00:00:55,850
is when I have the article, I'll add a class name and that one will be equal to the position.

12
00:00:56,300 --> 00:01:00,330
And like I said, by default, they will get that next line.

13
00:01:00,560 --> 00:01:04,130
So at the moment, of course, we cannot see that for multiple reasons.

14
00:01:04,490 --> 00:01:05,990
Now I do have the next slide.

15
00:01:05,990 --> 00:01:12,890
But first of all, in the article, the opacity certain and then also in the section center, remember,

16
00:01:13,070 --> 00:01:14,030
the overflow is.

17
00:01:14,630 --> 00:01:22,040
So now what I did is I moved all the slides to the right because again, they have this position absolute.

18
00:01:22,870 --> 00:01:30,730
Correct, and then I just use transform property to set up trancelike X 100 percent, which just means

19
00:01:30,730 --> 00:01:36,300
that we move them 100 percent off its own with to the right.

20
00:01:36,910 --> 00:01:40,470
Now, of course, first I would want to set up my active slide.

21
00:01:40,900 --> 00:01:47,270
And the way I can do that, I can check the index where I'm going to say if the person index.

22
00:01:47,650 --> 00:01:55,270
So if the index for that item in the list matches to whatever I have in the index as my stage value,

23
00:01:55,390 --> 00:01:58,510
then this slide will get that active.

24
00:01:59,020 --> 00:02:01,650
So not next slide, but the active class.

25
00:02:01,900 --> 00:02:10,690
So in here I'll say if I'm one person in X matches the index, then what I would want to do is change

26
00:02:10,690 --> 00:02:11,300
the position.

27
00:02:11,350 --> 00:02:18,600
That's why we used the key word instead and that one will be equal to the active slide.

28
00:02:18,880 --> 00:02:25,000
And what you should notice that the first item should be right in the center.

29
00:02:25,840 --> 00:02:31,630
And if you want to double check that as my data and there it is, it is Maria Ferguson, the office

30
00:02:31,630 --> 00:02:34,790
manager, and that is her quote.

31
00:02:35,240 --> 00:02:42,850
OK, so hopefully that makes sense where again, we have a list of items I'm iterating over by default.

32
00:02:43,060 --> 00:02:48,550
I place them all the way on the right hand side and it's going to be easier to see that.

33
00:02:48,550 --> 00:02:49,330
And we're here now.

34
00:02:49,330 --> 00:02:51,920
Of course, the application will be rendered.

35
00:02:51,940 --> 00:02:57,790
So that's why it is easier if I navigate in year and again, in my case, I'll comment.

36
00:02:58,090 --> 00:02:59,260
You don't have to do that.

37
00:02:59,770 --> 00:03:03,940
But I'll look for my container and overflowing on.

38
00:03:03,940 --> 00:03:09,910
You'll notice that all the slides are sitting nicely here on the right hand side and only the one that

39
00:03:09,910 --> 00:03:14,290
is active is right in the middle because the active one.

40
00:03:15,400 --> 00:03:22,430
Notice the cases where the transform is zero, which translates and that is zero.

41
00:03:22,570 --> 00:03:27,580
That's why it is sitting where it's supposed to be, because by default, all of them technically are

42
00:03:27,790 --> 00:03:28,800
position absolute.

43
00:03:29,080 --> 00:03:36,350
But using the classes, I moved all of them to the right and then only the active one is still in center.

44
00:03:36,850 --> 00:03:41,530
And now, of course, I would need to come up with a last line as well.

45
00:03:42,070 --> 00:03:42,550
Correct.

46
00:03:43,090 --> 00:03:48,640
And the way we do that is by adding one more condition in our.

47
00:03:49,660 --> 00:03:51,370
So I have one for next slide.

48
00:03:51,520 --> 00:03:53,010
I have one for active slide.

49
00:03:53,290 --> 00:04:03,250
And now I want to check if the person index is index minus one or it is the last one in the list.

50
00:04:03,520 --> 00:04:04,790
So let's do it this way.

51
00:04:04,960 --> 00:04:05,920
I'm going to go with if.

52
00:04:07,040 --> 00:04:13,580
I already know that I'll change my position, I'll say position is a last index, and here I would want

53
00:04:13,580 --> 00:04:14,720
to set up two conditions.

54
00:04:15,140 --> 00:04:23,840
One, as I'm changing the slides, I would want to set up the slide that has the index value of one

55
00:04:23,850 --> 00:04:25,630
less than the current one.

56
00:04:26,000 --> 00:04:31,900
And also by default, I would want to place the last item in the worst.

57
00:04:32,390 --> 00:04:38,780
So I guess let's start with a general set up and then we'll take a look at why we need to place the

58
00:04:38,810 --> 00:04:41,090
last item in the list as well.

59
00:04:41,420 --> 00:04:48,020
So what I would want is just person index is equal to index minus one.

60
00:04:48,300 --> 00:04:49,370
So why we're doing that?

61
00:04:49,370 --> 00:04:50,720
Well, because.

62
00:04:51,580 --> 00:04:56,080
What's going to happen, of course, will be changing these hours at the moment, of course, if this

63
00:04:56,080 --> 00:05:00,790
is zero, so I have index minus one, which is one negative one.

64
00:05:00,790 --> 00:05:01,080
Right.

65
00:05:01,330 --> 00:05:03,580
So of course, now this doesn't work.

66
00:05:04,040 --> 00:05:06,790
That's why there's going to be a second condition in the second.

67
00:05:07,000 --> 00:05:08,260
But let me just showcase that.

68
00:05:08,380 --> 00:05:16,180
For example, if you add the index of two and of course, there's going to be some kind of item already

69
00:05:16,180 --> 00:05:16,420
there.

70
00:05:16,660 --> 00:05:18,400
Now, by the way, this is last index.

71
00:05:18,460 --> 00:05:20,470
Should have been the last slide.

72
00:05:20,740 --> 00:05:23,440
My bad going to go with the last slide.

73
00:05:23,740 --> 00:05:30,820
And then you'll notice that since my index has some kind of value in this case, of course it is two

74
00:05:31,150 --> 00:05:34,830
that I'm placing the item that is one list.

75
00:05:35,320 --> 00:05:41,410
And what I'm doing is I'm just moving the one that was currently active to the left.

76
00:05:41,920 --> 00:05:48,380
So if the index is true, then of course I'm displaying the item that has the index of terror.

77
00:05:48,430 --> 00:05:54,470
But I already know that probably my last one was the index of one since I was increasing.

78
00:05:55,180 --> 00:05:58,540
So that's why I display this guy more here.

79
00:05:58,810 --> 00:06:07,000
And the next thing is, if I go back and if I set it back to zero, which was our initial value, then

80
00:06:07,000 --> 00:06:09,090
of course I don't see any slide over here.

81
00:06:09,310 --> 00:06:10,690
So that's what I'll set up.

82
00:06:10,690 --> 00:06:18,670
The second condition where not only I'm checking if the index minus one equals to the person index,

83
00:06:18,940 --> 00:06:25,660
which will use as we're actually controlling the slides, I also would want to set up or condition where

84
00:06:25,660 --> 00:06:25,900
I'm going.

85
00:06:25,900 --> 00:06:29,530
I say if index is equal to.

86
00:06:30,480 --> 00:06:35,320
And the person index is equal to the last index inquiry.

87
00:06:35,760 --> 00:06:37,650
So out here, Prentice's.

88
00:06:39,010 --> 00:06:47,350
Like, so one more set of promises and I'll say if the index that just means that it is the initial

89
00:06:47,350 --> 00:06:53,590
load and I'm going to go with the person index is equal to a people.

90
00:06:53,750 --> 00:06:58,630
So the name of my area, of course, length and minus one.

91
00:06:58,990 --> 00:07:06,980
And what that is doing once the app initially renders, then I'm placing the last item over here.

92
00:07:07,240 --> 00:07:14,920
So when I'm going to be changing the index values, then of course this one will slide over here because

93
00:07:14,920 --> 00:07:16,630
it is going to become active.

94
00:07:16,810 --> 00:07:17,950
Hopefully that makes sense.

95
00:07:18,220 --> 00:07:26,170
And now we can proceed to set up our buttons where we'll control the functionality of that state value

96
00:07:26,350 --> 00:07:27,460
of index.