34
SHARES
Responsive Layered Slider
June 18, 2015
8 comments
93,117
In this tutorial you will lean how to create a responsive layered slider. The slider will have multiple slides, each slide will have multiple layers which can have a different fade in effect.

The entire slider works by using just a JavaScript document and you don't have to attach any CSS style sheets to use it. Each layer will have 18 possible effects which you can use to your liking. All animations are created by inserting CSS code into the page using JavaScript

I was able to make the slider responsive by recalculating all layers sizing and positioning every time the browser is resized. This is quite a complex tutorial and if you want to use it in your projects i would advise you to read the entire tutorial.

Check Andrey Gordeev work on behance, he provided the images used in this demo.

HTML

This is the basic html structure:

I used the attributes data-width and data-height to indicate the maximum width and height of the slider, data-animation is the time it takes for animations on each layer, data-current can be set to true or false and it will show or not show the current slide indicator at the bottom, data-progress can be set to true or false and it will show the progress of the current slide.

After creating the main structure we will go ahead and insert the slides. You can insert as many slides as you want. In each slide there will be a number of layers and here as well you can insert as many layers as you want. Please keep in mind that inside each layer you can only insert images, png images are perfect for this. You should insert images with a size that makes sense related to the maximum sizes of the slider.

You will need to write the sizes of that layer using the attributes data-width and data-height as well as setting the distance from the layer to the left margin of the slider using data-left and the distance from the layer to the top of the slider using data-top, data-effect is the attribute that reflects the display effect for that particular layer.

You can use the following effects:

CSS

Nothing to see here, keep scrolling !

JavaScript

Let's start by creating some variables that will make our work easier:

selected_element is the element that we are applying the slider to, controls_coloris the default color for the progress bad and for the current slider indicators, controls_hover_color is the darker shade of color for the indicators and it will highlight the current slide, progress_size is the height in pixels of the progress bar, current_slide is the slide number at which the slider will start from, per_slide_duration is the duration it will take for each layer to show, end_duration is the pause duration after all layer are displayed in that particular slide.

You can modify the following variables: controls_color, controls_hover_color, progress_size, current_slide, end_duration.

Because this is a complex project I've put everything into functions.

The first function is style_page(), this function appends the CSS effects in the header of the document. Those style sheets will create all 18 effects. Because there is a lot of CSS i will only include a small portion of that code here, if you want to see the rest go ahead and download the files for this tutorial.

Thinks to keep in mind: the string from css_style variable needs to be on a single line else you will get errors.

The next function is check_overlay()

This function will append, if they are activated, the html of 'current slide indicator' and the html of 'progress bar'.

The next function is resize(). This is the most complex function in this tutorial. First we will create some variables:

We will use those variables to the slider, slides and the layers each time you resize the browser.

In order to change all the slides we will have to loop thru them.

Now, inside each slide we have to create another loop to resize each layer.

In this loop we will change the with, height and distance from left and from the top of the layer. All those properties will change each time you resize the browser, that is why we will have to instantiate this function each time that happens.

Think about that for a second each time you resize your browser the script will loop all the slides then loop all the layers and also calculate with, height and distances for all the layers. That is crazy.

Enough with the thinking let's move to the next function.

progress_bar() function will make the progress bar wider within a given amount of time, this function will in instantiated later in another function.

check_layer() function will apply the appropriate effect to a layer. This is done by adding and removing CSS classes.

The next function will hide all the slides and all the layers. We will need to do this as each slide or layer needs to be hidden at the beginning, we will show or hire layers using another function.

The last function we will need is the cycle() function. This function will be used to move the slider from one slide to another.

What this function does is to instantiate the progress bar function, set timers for when to hide and show each layer and then set another timer to reinstantiate cycle() function multiple times using a different interval.

Using this in your projects

To incorporate this in your projects you will first have to attach jquery plugin then the JavaScript document 'responsive-layered-slider.js' located inside the download provided here. After that create the basic structure highlighted in the HTML, create the appropriate slides and layers and at the end put the proper attributes for each layer as well as the global ones for the slider.

Please keep in mind that this slider only supports images and i would advise you to first create the slides in Photoshop and then put then in HTML

Subscribe to our newsletter to get notified when there is a new tutorial.

34
SHARES
22
8
2
2
About the author
Popa Robert: Is the founder of Simbyone.com, freelance web developer and designer, he likes to create beautiful websites and water cooled PC's
8 Comments
Abdulhakeem Samae
June 20, 2015
It is possible to add prev and next button? And how? thanks
Popa Robert
June 20, 2015
At this point no it is not possible.
guy
August 20, 2015
how do you make it stop looping. I have taken out the layers I want to use but it keeps looping
Bren
May 5, 2016
First thing this is really a great plugin!! Good Work!! The only thing is I am not able to navigate through the bullet controls at bottom. Is there any solution to this ?? Thanks
Andrea
July 10, 2016
Please somebody can help me to implement this script?
Andrea
July 10, 2016
somebody can help me
sivaadhithya
July 26, 2016
I am not able to navigate through the bullet controls at bottom. Is there any solution to this ??
yellow zee
October 17, 2016
Fantastic and I love it, very easy to use and the options are endless, great work
Would you like to share your thoughts?
Name:*
Email:*
Website:
Message:*
Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
Hot Posts
1,002,657
22 comments
93,118
8 comments
Subscribe to our newsletter
You have to confirm your email to subscribe successfully. We send our newsletter about once a week.