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 with translate()
  • 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.

Therefore, in other words, we simply need to move .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:

If we were to move .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?

Firstly, this method makes our slider responsive for smaller and larger devices and secondly it doesn't require any additional styling.

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%.

The reason for using a negative sign is to translate the slides to the left; positive x-translations move an element to the right.

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.

Slide Effect Slider