Introduction
Apart from fading effects as we've seen in the previous sequence of chapters there are sliding effects possible to give to our slider as well. Not only are they possible but, in effect, the real feel of sliders.
Sliding effects can also help us in building touch interactive sliders using easily Javascripts TouchEvent
API. But that's something for the upcoming chapters.
Not only this but giving sliding effects as a whole, is a lot easier as compared to fade effects.
And so a lot of talking uptil now - it's time to get into real business!
Mechanism
Just like always, before moving over to coding the slide effect we will first take sometime to understand its mechanism. In fact we can't ever begin to code something without putting in a bit of thought.
The way this effect operates is that when we navigate to a new slide the slider transitions as if it was scrolling with a scroll bar. The whole slider container translates itself to the left or right depending on the navigation. This time the individual slides aren't transitioned but instead their whole encapsulating container which in our case is .slides-wrapper
from the More Styling chapter.
And this it for the mechanism. It is very basic and one which you might have experienced hundreds of times already without ever realising it.
Building the effect
Now with the mechanism dealt with it's time for you to think on how will it be implemented in real code.
Of the following, choose the element we have to transition in the slide effect.
.slider-cont
.slider
.slides-wrapper
.slides
Which of the following properties can move the element, you selected above, in a transition
?
transform
coupled withtranslate()
left
margin-left
- We can potentially use all of the above
Choose the property that shows the best performance in getting transitioned.
transform
left
margin-left
How can we stack each .slides
element next to the one another.
- Using
left: 0%
for the first slide,left: 100%
for the second one and so on.. - Using
z-index
- Using
float: left
- Using choice A or C
If you did well in these questions then you are all ready to start building this effect on your own. Give it a try, and refer back to help if you get stuck at some point! It will be some good fun!
Anyways let's continue on with seeing how things work together in building this effect.
As we said earlier, we need to slide the whole slide's container because that is the easiest way to get this effect in action. We could've slided every slide to some amount of distance seperately as well but that would've been extra and unneccessary work for you and the CSS interpreter to do.
.slides-wrapper
and give it the transition
property.Now a fair question that arises at this point is that why choose .slides-wrapper
and not .slider
. Try to think on it for a minute - will moving .slider
ONLY move the slides or something else too. So here's the reasoning:
.slider
to the left or right it would move together with the navigation buttons - recall that we nested the navigation buttons inside .slider
. We only want the slides to move here and there - not the buttons so hence we move a container that only containes the actual slides - not anything else!Secondly just like in fading effects where we transitioned opacity
and visibility
to get the effect into action; in the slide effect, since we need to move around the slides, we'll go with transform
to take care of this.
We could've also used left
, or even margin-left
to move .slider-wrapper
, but we didn't because of the relatively poor performance of these properties compared to transform
.
Lastly, since in this effect the slides are placed in line with each other we will also need to position them this way. The choices to do this are to either use left
or float
on the slides.
To go with the former we'll have to give each slide a left
value of: its index
* 100%
i.e left: 0%
for the first slide, left: 100%
for the second, left: 200%
for the third one and so on.. We'll go with this choice and here's the reason to it?
So with all the things taken care of it's time to finally code the slide effect.
CSS
Following we give .slides-wrapper
a transition together with specifying the property it should be concerned with.
.slides-wrapper {
transition: 1s ease-in-out;
transition-property: transform
}
And this is it for the CSS!
JavaScript
For the JavaScript part, we will first get over with placing the slides in line with each other. This will be done using a for
loop by iterating over each slide and giving it a value for left
equal to its index * 100%:
for (var i = 0;i < len; i++) {
slides[i].style.left = (i * 100) + "%";
}
After this we have to take care of the logic behind the navigation of the slider.
Initially (when counter = 0
) we need to start by translating .slides-wrapper
to a value of 0 i.e translateX(0)
. Then for navigating to the second slide (counter = 1
) we need to set this value to -100%. For the third slide (counter = 2
) we need to set it to -200%. To go back from here to the second slide we need to again translate to -100%.
Do you notice some relation between the translation and the variable counter
. Try to come up with an expression and see how it matches with the following:
translateX = -counter * 100%
So let's now finally program the slide effect in JavaScript.
We'll assume that the variable slidesWrapper
is declared globally and selects the .slides-wrapper
class.
var slidesWrapper = document.getElementsByClassName("slides-wrapper")[0];
The navigateSlider()
function goes something like the following:
slidesWrapper.style.transform = "translateX(-" + (100 * counter) + "%)";
When counter = 0
, we have translate(0%)
; when counter = 1
we have translate(-100%)
taking to the second slide and so on... Simply perfectly what we wanted!
And this completes the slide effect. You can check it out in the example below.