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

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:

Add an HTML Slider

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.