Submit your widget
HomeSlideshow & ScrollerjQuery and CSS3 Sliding Horizontal Parallax

jQuery and CSS3 Sliding Horizontal Parallax

Created 12 years ago   Views 54501   downloads 9525    Author sequencejs
jQuery and CSS3 Sliding Horizontal Parallax
View DemoDownload
98
Share |

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 -- no jQuery knowledge required!

Basic Set Up

Add Files

Place a link to jQuery and the sequence.js file in the <head> of your document:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sequence.js"></script>

Initiate Sequence

Once you’ve added the necessary files for Sequence, within the <head> of your document, inititate an instance of Sequence like so:

<script type="text/javascript"> 
    $(document).ready(function(){
        var sequence = $("#sequence").sequence(options);
    }
</script>

Let’s break this down:

Firstly, we are saving an instance of Sequence into a variable (“var”) called sequence. The variable name is entirely up to you and, if necessary, will allow us to interact with Sequence via custom JavaScript which is explained in the Developer Option’s.

After the variable name, we specify a jQuery selector $("#sequence"), which is the element we want to act as the Sequence container. We will create a div in the HTML shortly with an ID of “sequence”.

The Sequence function (.sequence(options)), will accept many options that allow for modifying how Sequence works. These options are explained in the Developer Option’s section. If options are not specified, Sequence will rely on its default settings.

It is possible to place multiple instances of Sequence on the same page, like so:

<script type="text/javascript"> 
    $(document).ready(function(){
        var sequence = $("#sequence").sequence(options);
        var sequence2 = $("#sequence2").sequence(options2);
    }
</script>

Add an HTML Slider

Add Sequence’s simple HTML structure like so:

<div id="sequence">
    <ul>
        <li>
            <!--Frame 1 content here-->
        </li>
        <li>
            <!--Frame 2 content here-->
        </li>
        <li>
            <!--Frame 3 content here-->
        </li>
    </ul>
</div>

Sequence consists of a container (a div with a unique ID) and an unordered list. Sequence refers to each list item within that unordered list as a “frame”. Frames hold the content of your Sequence slider.

Add Content

To add content to a frame, simply put HTML within each list item:

<div id="sequence">
    <ul>
        <li>
            <div class="info1">
                <p>Frame 1</p>
            </div>
        </li>
        <li>
            <div class="info2">
                <p>Frame 2</p>
            </div>
        </li>
        <li>
            <div class="info3">
                <p>Frame 3</p>
            </div>
        </li>
    </ul>
</div>

Read more:http://www.sequencejs.com/documentation.php

You might also like