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.
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:
Nothing to see here, keep scrolling !
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
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.