1
00:00:00,330 --> 00:00:06,930
OK, we have our initial setup in place where we're adding the classes of next slide, act of light

2
00:00:06,930 --> 00:00:07,410
and last.

3
00:00:08,040 --> 00:00:10,920
So now we want to navigate to my buttons.

4
00:00:11,250 --> 00:00:19,890
And I would want to add functionality where we can control the state value by the name of index, and

5
00:00:20,040 --> 00:00:21,940
it's going to be as straightforward as it gets.

6
00:00:22,140 --> 00:00:26,850
So we have unclick online and here I would want to pass in the one function.

7
00:00:27,170 --> 00:00:32,650
I'm just going to say set index and that one will be equal to index minus one.

8
00:00:33,120 --> 00:00:41,550
So once I click on a preview, I would want to make sure that the state value of the index is of course

9
00:00:41,550 --> 00:00:47,220
decreased by one since I would want to see the previous slide online.

10
00:00:47,250 --> 00:00:53,760
You can probably already guess that for the next one, just copy and paste and then on the plus one.

11
00:00:54,060 --> 00:00:57,600
Now I can tell you right away that they are going to be some bugs.

12
00:00:57,750 --> 00:01:00,120
That's why we'll have to set up our usufruct.

13
00:01:00,420 --> 00:01:02,810
But some functionality should work.

14
00:01:03,180 --> 00:01:09,840
So if you'll click right now to the previous one year, that is going to be a big mess.

15
00:01:10,350 --> 00:01:11,160
Don't worry about it.

16
00:01:11,160 --> 00:01:13,290
We'll fix that with a year's effect.

17
00:01:13,530 --> 00:01:20,550
First, what I would want you to do is just take a look that once you click what we do, we increase

18
00:01:20,910 --> 00:01:21,660
the value.

19
00:01:21,990 --> 00:01:24,690
And of course, we show up the second guy.

20
00:01:24,840 --> 00:01:25,230
Correct.

21
00:01:25,530 --> 00:01:29,870
So John Doe in our array should be second.

22
00:01:30,060 --> 00:01:36,390
And there is that's why he is displayed and Maria moved to the last one.

23
00:01:36,570 --> 00:01:39,670
And you can also see how we're changing those lines out here.

24
00:01:39,990 --> 00:01:49,260
So as we increase the index now, the Peter gets the active slide and then the last slide is, of course,

25
00:01:49,260 --> 00:01:58,180
for John, because remember in the app we were checking, well, what is the value for the index?

26
00:01:58,500 --> 00:02:06,360
So if the person index was equal to index minus one, then we added the last line, if the index was

27
00:02:06,360 --> 00:02:09,570
equal to whatever is mystate value.

28
00:02:09,750 --> 00:02:15,900
So if the person index was equal to index, then of course we've got a actives line and all of them

29
00:02:15,900 --> 00:02:18,000
by default will have next slide.

30
00:02:18,300 --> 00:02:26,100
Now, the problem is going to be once we get to the end of all right, because either the indexes are

31
00:02:26,100 --> 00:02:34,440
too big, there are no referencing items in our list, or essentially we go negative because if I refresh

32
00:02:35,250 --> 00:02:41,610
notice, once I click the previous one, like I said, our functionality goes bananas because all of

33
00:02:41,610 --> 00:02:43,770
them have this next class.

34
00:02:43,770 --> 00:02:44,160
Why?

35
00:02:44,520 --> 00:02:51,290
Or because in data, when I'm checking for index minus one, of course it is already negative.

36
00:02:51,840 --> 00:02:56,460
So there is no person index that is equal to a index minus one.

37
00:02:56,790 --> 00:03:03,210
And that's where we're going to set up our effect, where essentially we'll check well, what is the

38
00:03:03,210 --> 00:03:07,480
state value and then depending on that, we will flip it around.

39
00:03:07,800 --> 00:03:15,470
So if it goes negative, we'll set it back to positive if it is bigger than the actual index.

40
00:03:15,480 --> 00:03:16,010
And all right.

41
00:03:16,290 --> 00:03:20,190
Then, of course, we'll send it back to the initial one to the zero.