jQuery and CSS3 Sliding Horizontal Parallax

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 of your document:


Initiate Sequence

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


$(document).ready(function(){
var sequence = $("#sequence").sequence(options);
}

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:


$(document).ready(function(){
var sequence = $("#sequence").sequence(options);
var sequence2 = $("#sequence2").sequence(options2);
}

Add an HTML Slider

Add Sequence’s simple HTML structure like so:

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:

  • Frame 1

  • Frame 2

  • Frame 3

 

Download: http://www.htmldrive.net/items/download/1129

Leave a comment