All language subtitles for 111 Slider - Setup Classes.en_US

And once we understand the success now, of course, let's not forget, you will react and set up our

functionality.

Now I'll leave this one still open because I will navigate back and toggle some classes.

So in the app and jayesh, what I would want is when we're iterating over the list, then like I said,

I would want to start adding these classes to my article.

Like I already previously mentioned.

By default, they will all get next slide.

So I'm going to go with that position.

And that one will be equal to the next slide strength.

Now, the name here is important because it needs to match the class, because what I'm going to do

is when I have the article, I'll add a class name and that one will be equal to the position.

And like I said, by default, they will get that next line.

So at the moment, of course, we cannot see that for multiple reasons.

Now I do have the next slide.

But first of all, in the article, the opacity certain and then also in the section center, remember,

the overflow is.

So now what I did is I moved all the slides to the right because again, they have this position absolute.

Correct, and then I just use transform property to set up trancelike X 100 percent, which just means

that we move them 100 percent off its own with to the right.

Now, of course, first I would want to set up my active slide.

And the way I can do that, I can check the index where I'm going to say if the person index.

So if the index for that item in the list matches to whatever I have in the index as my stage value,

then this slide will get that active.

So not next slide, but the active class.

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

the position.

That's why we used the key word instead and that one will be equal to the active slide.

And what you should notice that the first item should be right in the center.

And if you want to double check that as my data and there it is, it is Maria Ferguson, the office

manager, and that is her quote.

OK, so hopefully that makes sense where again, we have a list of items I'm iterating over by default.

I place them all the way on the right hand side and it's going to be easier to see that.

And we're here now.

Of course, the application will be rendered.

So that's why it is easier if I navigate in year and again, in my case, I'll comment.

You don't have to do that.

But I'll look for my container and overflowing on.

You'll notice that all the slides are sitting nicely here on the right hand side and only the one that

is active is right in the middle because the active one.

Notice the cases where the transform is zero, which translates and that is zero.

That's why it is sitting where it's supposed to be, because by default, all of them technically are

position absolute.

But using the classes, I moved all of them to the right and then only the active one is still in center.

And now, of course, I would need to come up with a last line as well.

Correct.

And the way we do that is by adding one more condition in our.

So I have one for next slide.

I have one for active slide.

And now I want to check if the person index is index minus one or it is the last one in the list.

So let's do it this way.

I'm going to go with if.

I already know that I'll change my position, I'll say position is a last index, and here I would want

to set up two conditions.

One, as I'm changing the slides, I would want to set up the slide that has the index value of one

less than the current one.

And also by default, I would want to place the last item in the worst.

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

last item in the list as well.

So what I would want is just person index is equal to index minus one.

So why we're doing that?

Well, because.

What's going to happen, of course, will be changing these hours at the moment, of course, if this

is zero, so I have index minus one, which is one negative one.

Right.

So of course, now this doesn't work.

That's why there's going to be a second condition in the second.

But let me just showcase that.

For example, if you add the index of two and of course, there's going to be some kind of item already

there.

Now, by the way, this is last index.

Should have been the last slide.

My bad going to go with the last slide.

And then you'll notice that since my index has some kind of value in this case, of course it is two

that I'm placing the item that is one list.

And what I'm doing is I'm just moving the one that was currently active to the left.

So if the index is true, then of course I'm displaying the item that has the index of terror.

But I already know that probably my last one was the index of one since I was increasing.

So that's why I display this guy more here.

And the next thing is, if I go back and if I set it back to zero, which was our initial value, then

of course I don't see any slide over here.

So that's what I'll set up.

The second condition where not only I'm checking if the index minus one equals to the person index,

which will use as we're actually controlling the slides, I also would want to set up or condition where

I'm going.

I say if index is equal to.

And the person index is equal to the last index inquiry.

So out here, Prentice's.

Like, so one more set of promises and I'll say if the index that just means that it is the initial

load and I'm going to go with the person index is equal to a people.

So the name of my area, of course, length and minus one.

And what that is doing once the app initially renders, then I'm placing the last item over here.

So when I'm going to be changing the index values, then of course this one will slide over here because

it is going to become active.

Hopefully that makes sense.

And now we can proceed to set up our buttons where we'll control the functionality of that state value

of index.