OK, we have our initial setup in place where we're adding the classes of next slide, act of light
and last.
So now we want to navigate to my buttons.
And I would want to add functionality where we can control the state value by the name of index, and
it's going to be as straightforward as it gets.
So we have unclick online and here I would want to pass in the one function.
I'm just going to say set index and that one will be equal to index minus one.
So once I click on a preview, I would want to make sure that the state value of the index is of course
decreased by one since I would want to see the previous slide online.
You can probably already guess that for the next one, just copy and paste and then on the plus one.
Now I can tell you right away that they are going to be some bugs.
That's why we'll have to set up our usufruct.
But some functionality should work.
So if you'll click right now to the previous one year, that is going to be a big mess.
Don't worry about it.
We'll fix that with a year's effect.
First, what I would want you to do is just take a look that once you click what we do, we increase
the value.
And of course, we show up the second guy.
Correct.
So John Doe in our array should be second.
And there is that's why he is displayed and Maria moved to the last one.
And you can also see how we're changing those lines out here.
So as we increase the index now, the Peter gets the active slide and then the last slide is, of course,
for John, because remember in the app we were checking, well, what is the value for the index?
So if the person index was equal to index minus one, then we added the last line, if the index was
equal to whatever is mystate value.
So if the person index was equal to index, then of course we've got a actives line and all of them
by default will have next slide.
Now, the problem is going to be once we get to the end of all right, because either the indexes are
too big, there are no referencing items in our list, or essentially we go negative because if I refresh
notice, once I click the previous one, like I said, our functionality goes bananas because all of
them have this next class.
Why?
Or because in data, when I'm checking for index minus one, of course it is already negative.
So there is no person index that is equal to a index minus one.
And that's where we're going to set up our effect, where essentially we'll check well, what is the
state value and then depending on that, we will flip it around.
So if it goes negative, we'll set it back to positive if it is bigger than the actual index.
And all right.
Then, of course, we'll send it back to the initial one to the zero.