All language subtitles for 110 Slider - CSS Overview.en_US

Beautiful.

So what is the general idea behind this lighter?

Well, we can just now get to the complete one, then we can go to the Deftones.

And what I would want you to do is look for a section center and then remove overflown so you have sexual

center and then just uncheck the box.

OK, that's number one.

Then I would want you to go to any article, just look for the opacity and then on Callick zero and

what you should say, by the way, let me zoom out, is that we have the list correct now by default,

all placed on my items here on the right hand side.

So they will be placed over here.

Then the active one will be in the center.

And the one that was just displayed is going to be over here.

And again, we will use smartly the indexes that we have in.

So depending on that index, we will change that class.

So in order for me to move those items, we're just changing the classes.

And you can see that right away.

If you're looking at the class names, notice how the active slide is changing.

So that is the one that is displayed.

And then we have the last slide, which is all the way on the left hand side.

And then we have the next slide, which all the slides by default will have next slide.

OK, so what success we would need to fix in our setup so at least we can start working on our react

functionality.

Well, let's navigate to infectiousness and learning here all the way at the bottom.

You'll notice three classes that have been coming around.

Then I also have commented about the opacity for the article.

And then also if you scroll up, you'll notice my container where at the moment I have overflow, hidden,

commented out and then I have comment already.

So let's start with the basics.

We have a list, correct.

In the election center, we iterate overanalyzed, so what we could do for our parent container, we

could set up display flex, so that is just going to line them up in one row.

OK, good, awesome.

Now, the problem is that right away for the article, I have the position absolute and I have the actual

position and that's why they're setting one on top of the other.

So what we can do is just common.

The South for the time being, which you'll notice in the slide setup, that we have the list because

like I said, we're using the flex one where we essentially put them in one row.

So once we have that row, this is where I would want to use that position absolute and kind of place

them all in a center.

Now, there's a reason why I still want to use the flex, because I would want to move some items to

the left and to the right.

So if we go back and if we uncommented, you'll notice, of course, we're going back to the look where

we have one item on top of the next one.

So essentially what I could have is some classes where I start moving them around, where I notice the

moment.

Yeah, I have position absolute and are sitting exactly in the center.

But we also have transformed property where we can start moving them left and right.

So if we have active slide, that is of course going to be sitting in the center.

So I'm not going to move it.

But then the last one and the next one, this is where I'm moving in either to the left or to the right.

Now, by default, I can tell right away that all the slides will get this next slide and then only

the active one and the last one will get these two classes.

So in order to test this out manually, we can navigate back to our project and we look for section

and section center.

And then for a few of the articles, just add that class name.

So navigate this tag and then say class here and the class you're looking for is next and then slide.

And once you added notice, now this guy moves all the way to the right.

And essentially this is exactly what we're going to do by default.

All of them will get this next slide.

Now, if I would want to place a slide in a center, I would want to add that active slide.

So, again, you can look for the element, then add class.

In this case, of course, it's not just X.

That's why we're adding the class and we'll say active and then slide the rest.

Now there's going to be some acting on, of course, rest of them are there as well.

That's why we cannot see much change.

But then let's add one more four of the previous one, so for the last one, so I'm going to go here,

I'll click again on the element and I'll say class class.

And we're going to go with Raev Slider.

I believe it was last slide.

Sorry, was the last slide.

I need to go one more time here.

Sorry I missed that up.

We have class, we have lost and landslide.

And once I had that one and of course I have slide to the left as well.

So we have a few classes.

We have the active one, the one that is sitting in the center and we have the next slide.

So the one that will be displayed and the last one which was just displayed or the last on in the right

and the way will control that will have our index.

And then depending on that index, we'll flip those classes.

Now back to the seats.

Has what I wanted by default is to hide them.

That's why we have the capacity of zero.

And also I didn't want to have the overflow.

So that's why on the container there is this overflow hidden.

That's why once you say notice, you cannot see those slides.

But I also have the capacity so it only shows up once it is active.

That's why if you check out the article here, I have the capacity.

So make sure that you uncommented that and not only the active slide or here is going to have this opacity

of one of the slides will be hidden by default.

And lastly, what I would want to mention is that since we're using position absolute, you must have

some kind of height for the container.

So in my case, it was 450 fifty pixels.

But just keep in mind that you'll always, always need to have some kind of height.

Otherwise it won't work because for the absolute technically out of the normal flow.

So if you don't set up some kind of height, everything is just going to be collapse.

That is the main idea.

We shouldn't see anything at the moment because we haven't had any of those classes.

We haven't added.

Next slide, the active slide or whatever.

But hopefully this makes sense where we have the set up of three classes online by default.

Essentially, we'll add this next slide.

So we'll move all our slides to the right that are going to be here.

But then depending on the value in our index, we will set up interactive class or the last slide class.