LayerSlider - The Parallax Effect Slider

This is a jQuery content slider using the famous parallax-effect! You can create as many layers and sublayers as you want. You can use images or any other HTML elements, including Flash movies as layers. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

WordPress version is also available of the plugin: LayerSlider WP (with WYSIWYG editor!)

What can you create with LayerSlider?

Only your imagination can stop you. Really!
Look at these wonderful examples:

• tosrilanka.com
• aurorastudio.fr
• ajovoirodaja.hu
• masterbeat.com

You purchased already and do you have any questions or need examples?

Please read first LayerSlider FAQ below on this page or on the FAQ tab.
You can find also examples with HTML markups.

Didn’t find solution of your question / problem? Please read the documentation. We tried to write a well detailed description about parameters, properties, settings, etc. If you have another problem with the script, please get in touch with us via email. You can send us email directly from this page (see the bottom box on the right sidebar: Email kreatura). Please write your question and the url your website, where we can check it! We will reply and try to solve your problem as soon as possible.

Features

• Use with ANY content you want (images, HTML elements, Flash movies, YouTube videos, etc.)
  (best view with semi-transparent PNG images or CSS3 styled HTML elements)
• Sliding from / to 4 directions or fading in / out (sublayers only)
• Unlimited number of layers / sublayers
• Multiple animations and easing
• Responsive layout
• Automatic slideshow function (optional: Backwards-Slideshow)
• Preload function
• Customizable UI
• Easy per-layer settings with rel or style tags
• Powerful API with callback functions
• Keyboard navigation
• Touch control for mobile devices (iOS tested)
• yourLogo feature with link option
• Skin support
• SEO friendly
• Multiple browser support (IE 7+, Safari 3+, iOS Safari, Chrome 3+, Firefox 3+, Opera 10+)
• Detailed Documentation

Changelog

1.8

• fixed some animations
• added background-images of layers to preload
• modified some CSS styles
• some parts of the source code rewritten
• added yourLogoLink feature
• added yourLogoTarget feature
• added noskin feature

1.7

• fixed fading bug (sublayers now appears if sliding in after fading out)
• fixed preload bug with sublayers with gradient backgrounds
• fixed working delayout of layers (From now, if you add a delayout to a layer, sublayers of that layer will be animating out immediately, but the layer (and the next layer) will be delayed by the delayout time of the current layer. So, you can animate out all sublayers BEFORE the parent layer will begin the animation.)
• fixed imagepreload bug
• added an option to animating the first slide instead of fading in
• the script is now fully responsive! (You can add % instead of pixels to left and top properties of sublayers and width or height properties of LayerSlider container. IMPORTANT : you have to use style tags to add these values! For more information, please read the documentation about this!)
• added yourLogo feature (You can now display your fixed logo above LayerSlider container.)
• added a new API function called cbInit()
• some minor bugfixes

1.6

• now sublayers supports fading transition
• added slideoutdirection property to sublayers
• added global background color / background image support
• fixed ‘1px gap’ bug
• fixed one layer bug
• fixed swing, linear and easeInOutQuint animations
• fixed hover on pause / stop bug
• fixed wrong directions of animations if navigating by slidebuttons
• fixed durationout property for sublayers

1.5

• added touch control for mobile devices
• now supports rel tags for properties
• added slidedirection property for sublayers too
• added pauseOnHover feature
• added a powerful API with callback functions

1.0

• first release

Frequently Asked Questions and Examples

• Creating a text layer with link
• Creating an image layer with link
• Embedding videos
• Example of a layer with different types of sublayers (image, links, video)
• Example of a news slider
• Do you have any other questions / problems with the script?

Creating a text layer with link

You have to use an anchor tag as a sublayer:

<a class="ls-s2" href="url" rel="optional local settings of sublayer">
    Your text goes here
</a>

Notes:

• because the current sublayer is the anchor element, you have to add all optional local setting to this element in a style or rel tag (as you can read in the documentation)
• the anchor element has display: block; and position: absolute; style properties in this case
• you have to add width or min-width style property to fix the width of this sublayer
• you can position this sublayer inside the parent layer by adding left and top style properties

Creating an image layer with link

You have to use an anchor tag as a sublayer:

<a class="ls-s2" href="url" rel="optional local settings of sublayer">
    <img src="yourimage" alt="sampletext" />
</a>

Notes:

• because the current sublayer is the anchor element, you have to add all optional local setting to this element in a style or rel tag (as you can read in the documentation)
• the anchor element has display: block; and position: absolute; style properties in this case
• you can position this sublayer inside the parent layer by adding left and top style properties

Embedding videos

The easiest way, that you create a div element as a sublayer and paste your video embed code into:

<div class="ls-s2" rel="optional local settings of sublayer">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/b2fVbR7maoc" frameborder="0" allowfullscreen></iframe>
</div>

In this example we used a YouTube embed code.

Notes:

• because the current sublayer is the div element, you have to add all optional local setting to this element in a style or rel tag (as you can read in the documentation)
• you can position this sublayer inside the parent layer by adding left and top style properties

Example of a layer with different types of sublayers (image, links, video)

Here is the HTML markup of a layer which has different types of sublayers:

<div class="ls-layer" rel="optional local settings of layer">

    <a class="ls-s2" href="url" rel="optional local settings of sublayer">
        Your text goes here
    </a>

    <a class="ls-s3" href="url" rel="optional local settings of sublayer">
        <img src="yourimage" alt="sampletext" />
    </a>

    <div class="ls-s4" rel="optional local settings of sublayer">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/b2fVbR7maoc" frameborder="0" allowfullscreen></iframe>
    </div>

    <img class="ls-s5" src="yourimage" alt="sampletext" rel="optional local settings of sublayer" />

</div>

As you can see, we can put different elements as sublayers in the same layer. If you use a div sublayer element as a container, you can put any HTML code into.

Example of a news slider

You can use p elements as well – so you can get LayerSlider to slide for example your top news on your site with backgrounds and nice effects. Let’s see an example of this:

<div id="newsslider">

    <div class="ls-layer" rel="optional local settings of layer 1">

        <!--background image, it has no local settings-->
        <img class="ls-bg" src="yourimage" alt="sampletext" />

        <!--title of news #1-->
        <p class="ls-s2" rel="optional local settings of sublayer" style="width: 300px; left: 100px; top: 50px;">
            Title of news #1
        </p>

        <!--prologue of news #1-->
        <p class="ls-s4" rel="optional local settings of sublayer" style="width: 300px; left: 100px; top: 100px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>

    </div>

    <div class="ls-layer" rel="optional local settings of layer 2">

        <!--background image, it has no local settings-->
        <img class="ls-bg" src="yourimage" alt="sampletext" />

        <!--title of news #2-->
        <p class="ls-s2" rel="optional local settings of sublayer" style="width: 300px; left: 100px; top: 50px;">
            Title of news #2
        </p>

        <!--prologue of news #2-->
        <p class="ls-s4" rel="optional local settings of sublayer" style="width: 300px; left: 100px; top: 100px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>

    </div>

</div>

Do you have any other questions / problems with the script?

Please read the documentation. We tried to write a well detailed description about parameters, properties, settings, etc. If you have another problem with the script, please get in touch with us via email. You can send us email directly from this page (see the bottom box on the right sidebar: Email kreatura). Please write your question and the url your website, where we can check it! We will reply and try to solve your problem as soon as possible.

Our Items @ Codecanyon

This is a responsive, touch-control supported jQuery slideshow plugin with Ken Burns effect and hover-on-fade transitions.

This is the WordPress plugin of LayerSlider! You can create as many layers and sublayers as you want. You can use unlimited images with links. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

This is a jQuery content slider using the famous parallax-effect! You can create as many layers and sublayers as you want. You can use images or any other HTML elements, including Flash movies as layers. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

The WordPress plugin of WeatherSlider!

It’s a beautiful weather slider widget with animated weather effects and 48 weather types.

This is a very powerful PHP weather plugin with a lot of features like Geolocation, server-side caching or language support.