Submit your widget

Simple Responsive Layered Slider wiht jQuery

Created 5 years ago   Views 16619   downloads 3769    Author simbyone
Simple Responsive Layered Slider wiht jQuery
View DemoDownload
Share |

We'll show you 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


This is the basic html structure:

<div class="sim-slider" data-width="2550" data-height="1240" data-animation="250" data-current="true" data-progress="true">
<div class="sim-slider-inner">

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.

<div class="sim-slider-slide">
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="1052" data-height="174" data-left="751" data-top="50"><img src="_assets/layer_0025.png" /></div> 
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="694" data-height="841" data-left="54" data-top="277"><img src="_assets/layer_0027.png" /></div> 
<div class="sim-slider-layer" data-effect="fadeInUp" data-width="1019" data-height="848" data-left="770" data-top="277"><img src="_assets/layer_0026.png" /></div> 
<div class="sim-slider-layer" data-effect="fadeInRight" data-width="694" data-height="841" data-left="1811" data-top="277"><img src="_assets/layer_0028.png" /></div> 

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.

Read more:

Tag: slideshow