Hi @kamalcon Sorry to say that I have no idea what happened to your ‘Origin’ page but your FIRST slider on it, which visually has 4 slides, recognized as only has 3 slides.
Guess you need to make a new one for it. But, if I may suggest you for your sliders.
First. Make things clear and concise. I mean, I would give each elements a name that show clearly what it is. See example image below.
Or if you have more than one sliders, you can set class name as ‘myslider1’. For me it is a good practice that will help me to avoid ‘chaos style’ because what happens to myslider1 will stay at myslider1. And always set properties only after you set a class on an element. Be careful using same nested classes through many elements.
Second. Once you have elements structured for your slider, we can work out easily with its content’s positions. Note that I did not do much on slide1 since it is only stay on the left. So here are head-slide1 and para-slide1 properties.
But, let’s have a look on slide2. The result will be like this
Notes that I only used ‘Align Right’ for head-slide2 to make it stay at right, but I used ‘float: right’ for para-slide2 to make it stay at right.
The reason I show you this is that we need to be careful to use float (with this structure) that it can affect element that directly below it. Like image shown below. As I set ‘float: right’ for head-slide2, para-slide2 ‘moved’ even I set its ‘float: right’ (It didnt stay at right as I expected).
So, in this case, if we really need to set head-slide2 ‘float: right’ we can add a Div block that its function is like a ‘wrapper’.
Last thing I can say here is that structure is important here and to make each element’s class as unique and concise as possible is also crucial. Using nested class is good but when things gone weird, we may better stay safe by set each elements with ‘unique’ class.
Well, that’s my 2 cent which obviously does not much.
Cheers
