1. Basic Setup
    1. Add Files
    2. Initiate Sequence
    3. Add an HTML Slider
    4. Add some Content
    5. Setup a No-JS Fallback
  2. Creating an Animated Theme
    1. Setting up a Container and Frames
    2. How Sequence's Animations Work
    3. Animating Backwards
    4. Animating Using CSS3 Transitions
    5. Animation Examples
  3. Developer's Options
    1. Options
      1. General
      2. Autoplay
      3. Next/Previous
      4. Pause
      5. Preloader
      6. Keyboard
      7. Swiping
      8. hashTags
      9. Fallback Theme
    2. Callbacks
      1. List of Callbacks
      2. Using Callbacks
    3. Public Methods
      1. Public Functions
      2. Public Variables

Documentation

Basic Set Up

Add Files

Place a link to jQuery and the sequence.jquery-min.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.jquery-min.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).data("sequence");
    });
</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).data("sequence");
        var sequence2 = $("#sequence2").sequence(options2).data("sequence");
    }
</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>  

Here we’ve added a div to each frame with unique classes. We will shortly write some CSS that will allow each div to animate in and out of the Sequence container.

Note that each frame can contain as many elements as necessary but only first level elements will be animated by Sequence.

Setup a No-JavaScript Fallback

In a small percentage of browsers, JavaScript may be disabled which is the technology Sequence is built upon. To prevent an empty container from showing, nominate a frame to be displayed by giving each of its content elements a class of “animate-in”:

<div id="sequence">
    <ul>
        <li>
            <div class="info1 animate-in">
                <p>Frame 1 information</p>
            </div>
            <img class="my-image animate-in" src="my-image.jpg" alt="An image of me" />
        </li>
        <li>
            <div class="info2">
                <p>Frame 2 information</p>
            </div>
        </li>
        <li>
            <div class="info3">
                <p>Frame 3 information</p>
            </div>
        </li>
    </ul>
</div>

Here we’ve nominated the first frame to be displayed if JavaScript is disabled. I’ve added an image to the first frame to demonstrate that each content element within the nominated frame should be given the “animate-in” class.

Creating an Animated Theme using CSS3

Setting up the Sequence Container and Frames

Let’s start by styling our Sequence container:

#sequence{
    border: black solid 3px;
    height: 370px;
    margin: 40px auto;
    position: relative;
    width: 450px;
}

Here we’ve given the container some basic dimensional properties and a border. We’ve also given the container a relative position. This is an important property as all of the content elements with a Sequence slider will be given an absolute position, like so:

#sequence li > *{
    position: absolute;
}

This way, when we come to position elements with the Sequence container, a position top of 0 pixels will be the top of the Sequence container, and a position left of 0 pixels will be the left hand side of the Sequence container.

How Sequence’s Animations Work

Each first level element within a frame will be animated by Sequence, but how that animation happens is entirely your choice and created using CSS3 transitions. By default, Sequence initially displays the first frame’s content, so let’s start by animating the first element from our example above.

In the HTML, we’ve given the div a class of “info1” and made sure it will be displayed in the absence of JavaScript by also giving it a class of “animate-in”.

Should JavaScript be enabled (in almost all cases it will be), Sequence will begin by removing the “animate-in” class. So the HTML will look like this:

<div class="info1">
    <p>Frame 1</p>
</div>

This element is in its “start” position. Sequence will automatically add a class of “animate-in” to it, which will trigger the CSS3 transitions we will shortly write. The HTML will look like this:

<div class="info1 animate-in">
    <p>Frame 1</p>
</div>

When the “animate-in” position is reached, Sequence will then remove the “animate-in” class, and add a class of “animate-out”, which again, we can control via CSS3 transitions. The HTML will look like this:

<div class="info1 animate-out">
    <p>Frame 1</p>
</div>

When the “animate-out” position is reached, Sequence will then start automatically applying these transitional phases to the next frames elements. Once the last frame’s elements have reached the “animate-out” position, Sequence will go back to the first frame, remove the “animate-out” class (reseting the element to it’s starting position), and the whole process will continue indefinetly.

  • .info1

    .animate-in

  • .info2

  • .info3

An instance of Sequence demonstrating how/when the transitional classes are applied (use arrow keys to navigate)

Animating Backwards

Sequence contains options that allow for a user to control the animation of frames using next/previous buttons, the keyboard left/right arrow keys or swiping on touch devices (version 1.0 onwards). You can also make Sequence play in reverse via the developer options. Sequence will apply the above mentioned transitional phase classes in reverse.

Let’s assume frame 2 has one element that is currently in the “animate-in” position. If a user were to click a “previous” button, Sequence would remove the “animate-in” class, resetting the element to its starting position and the previous frame’s element (frame 1), would be given the class of “animate-out” (reseting it to the “animate-out” position), followed by a class of “animate-in” to then make it transition into its “animate-in” position.

Animating Frame Elements using CSS3 Transitions

Now we know how Sequence works, we can manipulate the transition of frame elements using CSS3 transitions. Just before we begin adding transitional properties, let’s style the div within each frame:

.info1, .info2, .info3{
    background: #3f7ad6;
    color: white;
    height: 95px;
    padding: 5px;
    width: 95px;
}

We’ve made each div 95px wide and tall and given them a background colour. Now, let’s begin applying transitional properties:

.info1{
    left: -150px;
    top: 10px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}

Remember that an element with no transitional phase class is in its “start” position. We’ve started this element 150px outside of the Sequence container (to the left), and 10px from the top.

Note #1: we’ve given the element a transition duration but, this is NOT the duration it will take to go from the “start” position to the “animate-in” position. Instead, it is the duration it will take to go from the “animate-in” position to the “start” position when Sequence is animating backwards.

Note #2: Sequence has been built to work across all modern browsers which means it is necessary to use vendor prefixes for CSS3 attributes such as transition-duration. Please see the Vendor Prefixing Tips section for advice on how to make using vendor prefixes as easy as possible.

As we saw in How Sequence’s Animations Work, Sequence will add a class of “animate-in” to any active frame elements to make it transition to its “animate-in” position. So, let’s style the transition between the “start” and “animate-in” positions:

.info1.animate-in{
    left: 165px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}

We’ve made it so that the div with class “info1”, will move from its “start” position of left: -150px, to left: 165px. We haven’t specified a top position so that will remain the same as the “start” position (top: 10px). By adding a transition-duration, the time it will take to go between the “start” and “animate-in” positions will be 1 second (1s). Again, we’ve used vendor prefixes to make the theme work across all modern browsers.

.info1.animate-out{
    left: 500px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}

Once all of the frame’s elements have finished animating in, Sequence will then change the “animate-in” class to “animate-out”. As we did with the “animate-in” transition, we’ve changed the left value to make the element move outside of the Sequence container and specified a 1 second transition duration.

From here on, we can apply transition durations to the remaining elements within the second and third frame. For the purpose of this demo and the sake of simplicity, we can modify the CSS we’ve just written to apply the same transition durations to the other frame elements, like so:

.info1, .info2, .info3{
    left: -150px;
    top: 10px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}

Here we’ve given start positions to the div elements within the second and third frames.

.info2{
    top: 130px;
}

.info3{
    top: 250px;
}

This CSS overwrites the top positions for each element so one is positioned below the next.

.info1.animate-in, .info2.animate-in, .info3.animate-in{
    left: 165px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}

.info1.animate-out, .info2.animate-out, .info3.animate-out{
    left: 500px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}   

And finally we’ve included the second and third div elements in our “animate-in” and “animate-out” transitional positions.

What we’ve learnt in this demonstration are the basics to creating an animated theme for Sequence. You should now be able to create your own theme. Keep reading though, Sequence boasts even more useful features to help you make a truly amazing and unique theme.

Transitional CSS Examples

When specifying properties for transitional classes, in most cases you will use a transition-duration (unless you just want frame elements to immediately snap to the next/previous phase) but the remaining properties to transition between are entirely up to you. In this demo, we’ve only transitioned between numerous left properties, making an element move in and out of a Sequence container. Here’s just a few more examples you may like to experiment with:

Coming soon

Developer’s Options

Options

Sequence comes with many options that allow you to easily control its features.

Specifying Options

As explained in Initiate a Sequence Slider, each instance of a Sequence slider can be passed developer defined options that override Sequence’s default settings. Options are stored in an object passed to the .sequence() function, like so:

<script type="text/javascript"> 
    $(document).ready(function(){
        var options = {
            autoPlay: true,
            autoPlayDelay: 3000
        }
        var sequence = $("#sequence").sequence(options).data("sequence");
    }
</script>

Multiple instances of Sequence can be passed the same options:

<script type="text/javascript"> 
    $(document).ready(function(){
        var options = {
            autoPlay: true,
            autoPlayDelay: 3000
        }
        var sequence = $("#sequence").sequence(options).data("sequence");
        var sequence2 = $("#sequence2").sequence(options).data("sequence");
    }
</script>

Or differing options:

<script type="text/javascript"> 
    $(document).ready(function(){
        var options = {
            autoPlay: true,
            autoPlayDelay: 3000
        }

        var options2 = {
            autoPlay: true,
            autoPlayDelay: 5000
        }
        var sequence = $("#sequence").sequence(options).data("sequence");
        var sequence2 = $("#sequence2").sequence(options2).data("sequence");
    }
</script>

List of Options

The following is the complete set of options implemented within Sequence:

General Options

Option Name Value Default Description
startingFrameID A number 1 The frame that should first be displayed when Sequence loads.
cycle true/false true Whether or not Sequence should go to the first frame when a user navigates forward from the last frame. Likewise, whether Sequence should go to the last frame when a user navigates in reverse from the first frame.
animateStartingFrameIn true/false false true: The starting frame will begin in its "start" position and move to its "animate-in" position when Sequence loads
false: The starting frame will begin in its "animate-in" position when Sequence loads
transitionThreshold true/false or a number in milliseconds 1000 Whether or not there should be a delay between a frame animating out and the next animating in.

true: the next frame will not animate in until the current frame has completely animated out
false: the next frame will animate in at the same time as the current frame animating out
A number: The amount of milliseconds to wait after animating the current frame out, before the next frame is animated in
disableAnimateOut n/a n/a Description coming soon. This option is likely to be changed
reverseAnimationsWhenNavigatingBackwards true/false true Whether animations should be reversed when a user navigates backwards by clicking a previous button/swiping/pressing the left key

true: when navigating backwards, Sequence will animate the preceding frame from its "animate-out" position to its "animate-in" position (creating a reversed animation)
false: when navigating backwards, Sequence will animate the preceding frame from its "start" position to its "animate-in" position (as it does when navigating forwards)
moveActiveFrameToTop true/false true Whether a frame should be given a higher z-index than other frames whilst it is active, to bring it above the others

true: an active frame will be given a z-index value the same as the number of frames in the Sequence slider (bringing it to the top).
false: frames will not have a z-index applied to them

Autoplay Options

Option Name Value Default Description
autoPlay true/false true true: Sequence will automatically animate from frame to frame with a delay between each frame (specified using the autoPlayDelay setting)
false: Sequence will display the starting frame until a user chooses to navigate Sequence using next/previous buttons/swiping etc.
autoPlayDelay A number in milliseconds 5000 If using autoPlay, the speed at which frames should remain on screen before animating to the next.
autoPlayDirection 1/-1 1 If using autoPlay, the direction in which Sequence should play.

1: Forward
-1: Reverse

Next/Prev Options

Option Name Value Default Description
nextButton true/false or a CSS selector false A CSS selector that, when clicked, causes the current frame to animate out and the next to animate in.

true: use the default CSS selector (".next")
false: don't use a button
CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document
showNextButtonOnInit true/false true By default, the next button will be shown when Sequence is initiated. Set this to false should you wish for it to be hidden on initiation (you may like to do this to fade the button in using CSS for example)
prevButton true/false or a CSS selector false A CSS selector that, when clicked, causes the current frame to animate out and the previous to animate in.

true: use the default CSS selector (".prev")
false: don't use a button
CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document
showPrevButtonOnInit true/false true By default, the previous button will be shown when Sequence is initiated. Set this to false should you wish for it to be hidden on initiation (you may like to do this to fade the button in using CSS for example)

Pause Options

Option Name Value Default Description
pauseOnHover true/false true If using autoPlay, whether frames should stop auto playing when the user hovers over Sequence. autoPlay will continue again when the user moves their cursor outside of Sequence.
pauseOnElementsOutsideContainer true/false false Whether or not Sequence should pause when the user hovers over one of its child elements outside of the Sequence container
pauseButton true/false or a CSS selector false A CSS selector that, when clicked, causes Sequence to pause the autoPlay feature

true: use the default CSS selector (".pause")
false: don't use a button
CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document
unpauseDelay A time in milliseconds 0 The time Sequence should wait before starting autoPlay again once the user unpauses via the pause button. This only applies for the pause button and not the unpausing that occurs when the cursor is moved outside of the Sequence container for example
pauseIcon true/false or a CSS selector false If using autoPlay, display a pause icon when the user hovers over Sequence.

true: use the default pause icon CSS selector (".pause-icon")
false: don't display a pause icon
A CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document

Preloader Options

Option Name Value Default Description
preloader true/false or a CSS Selector true true: Use the default preloader and styles (".sequence-preloader")
false: don't use a preloader
CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document

If true, the following default preloading HTML and styles will be applied to the document:

HTML:
<div class="sequence-preloader">
    <svg class="preloading" xmlns="http://www.w3.org/2000/svg">
        <circle class="circle" cx="6" cy="6" r="6" />
        <circle class="circle" cx="22" cy="6" r="6" />
        <circle class="circle" cx="38" cy="6" r="6" />
    </svg>
</div>


Styles:
.sequence-preloader {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 999999;
}

@keyframes preload {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.sequence-preloader .preloading .circle {
    fill: #ff9442;
    display: inline-block;
    height: 12px;
    position: relative;
    top: -50%;
    width: 12px;
    animation: preload 1s infinite;
}
 
.preloading {
    display: block;
    height: 12px;
    margin: 0 auto;
    top: 50%;    
    margin-top: -6px;
    position: relative;
    width: 48px;
}
 
.sequence-preloader .preloading .circle:nth-child(2){
    animation-delay: .15s;
}
 
 .sequence-preloader .preloading .circle:nth-child(3){
    animation-delay: .3s;
}
 
.preloading-complete{
     opacity: 0;
     visibility: hidden;
     transition-duration: 1s;
}

div.inline{
    background-color: #ff9442;
    margin-right: 4px;
    float: left;
}
preloadTheseFrames an integer array [1] If preloader is true, specify which frames should have their images loaded before Sequence initiates. By default, images in the first frame are loaded before Sequence initiates.

The following example will load all images in frames 1 and 2:
preloadTheseFrames: [1,2]
preloadTheseImages a string array [] If preloader is true, specify which images should be loaded before Sequence initiates. By default, no individual images are loaded (note that all images in frame 1 load by default, as described in the preloadTheseFrames option)

The following example will load all images in frame 1 and one image from frame 2:
preloadTheseFrames: [1],
preloadTheseImages: ["images/frame2image.png"]
hideFramesUntilPreloaded true or false true If preloader is true, specify whether frames should be hidden during preloading and then shown afterwards.

true: hide frames until preloaded
false: don't hide frames during preloading
hidePreloaderUsingCSS true/false true If true, Sequence will add a CSS class of "preloading-complete" to the preloader, allowing you to hide that preloader using a CSS3 transition. Example:
.preloading-complete{
	display: none;
	opacity: 0;
	visibility: hidden;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-opera-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
The above CSS will cause the preloader element to fade out over a 1 second duration and then become "hidden".
hidePreloaderDelay A number in milliseconds 0 If hidePreloaderUsingCSS is true, the number of milliseconds to wait after the preloader has been hidden before initiating the first animation.

Keyboard Options

Option Name Value Default Description
keyNavigation true/false true Whether to allow the user to navigate between frames using the left and right arrow keys
numericKeysGoToFrames true/false true Whether Sequence should go to a specific frame when the user presses a numeric key. Pressing 1 goes to frame 1 etc.
keyEvents Object/false {left: "prev", right: "next"} The public method that should occur when the left or right arrow keys are pressed.

JSON object: "prev" goes to the previous frame, "next" go to the next frame. False prevents that key from having an event. See Public Functions next(), prev() and pause().
false: Don't use left/right key events.
customKeyEvents Object No default A JSON object containing the keyCodes and events to be triggered when those keys are pressed.

Example:

65: "prev",	//a
68: "next",	//d
83: "prev",	//s
87: "next"	//w
In this example, when the 'a' and 's' keys are pressed, Sequence will go to the previous frame. When 'd' and 'w' are pressed, Sequence will go to the next frame.

See Public Functions next(), prev() and pause().

Touch Swipe Options

Option Name Value Default Description
swipeNavigation true/false true Whether to allow the user to navigate between frames by swiping left and right on touch enabled devices
swipeThreshold A number 15 The percentage size of the Sequence container the user's finger must move before a swipe event is triggered
swipePreventsDefault true/false false If true, when a user swipes their finger over an instance of Sequence, the page will be prevented from scrolling. Be careful with this option, make sure the user can touch an area of the page that still allows them to scroll
swipeEvents Object/false {left: "prev", right: "next", up: false, down: false} The public method that should occur when the user swipes in a particular direction

JSON object: "prev" goes to the previous frame, "next" go to the next frame. False prevents that swipe action from having an event. See Public Functions next()/prev().
false: Don't use swipe events.

HashTag Options

The hashTag options are to be used with Ben Alman's jQuery HashChange plugin.

Please place a reference to the jQuery HashChange plugin above your reference to the Sequence plugin, like so:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="scripts/sequence.jquery-min.js"></script>
Option Name Value Default Description
hashTags true/false false If true, when a frame is navigated to and becomes active, the hashTag will change to reflect the frames ID. In the following example, when the first frame becomes active, the URL will be changed to end with the hashTag #intro. intro is taken from the list item's ID attribute.
<div id="sequence">
	<ul>
		<li id="intro">
			<h2 class="title animate-in">Built using Sequence.js</h2>
		</li>
	</ul>
</div>
hashDataAttribute true/false false Whether the hashTag should be taken from a list items ID attribute or a data attribute named data-sequence-hash

true: Use the data attribute named data-sequence-hash.
false: Use the ID attribute

In the following example, when hashDataAttribute is true and the first frame becomes active, the URL will be changed to end with the hashTag #superAwesome.
<div id="sequence">
    <ul>
    	<li id="intro" data-sequence-hash="superAwesome">
    		<h2 class="title animate-in">Built using Sequence.js</h2>
    	</li>
    </ul>
</div>
hashChangesOnFirstFrame true/false false Whether the hashTag should be changed when the first frame becomes active

true: The hashTag will change as soon as the first frame reaches its "animate-in" position.
false: The hashTag will not change when the first frame becomes active but will change for every other frame after that.

Complete List of Fallback Theme Options

The fallback theme options control Sequence when it is being viewed in browsers that do not support CSS3 transitions. When in these browsers, Sequence will fallback to a theme that animates each frames opacity -- fading in and out of frames.

More fallback themes and options will be made available with future releases of Sequence.

Option Name Value Default Description
theme A string slide The name of the fallback theme to be used when the browser doesn't support CSS3 transitions

slide: The default theme which causes frames to slide left and right.
fade: Causes an frame to fade out before the next fades in (note: due to poor support for opacity in Internet Explorer 8 and below it's advised to use the "slide" theme instead).
speed A number in milliseconds 500 The speed at which frames should transition when in a browser that does not support CSS3 transitions

Specifying Fallback Theme Options

Fallback theme options are included in the options of each instance of Sequence, like so:

<script type="text/javascript"> 
    $(document).ready(function(){
        var options = {
            fallback: {
                theme: "slide",
            	speed: 500
            }
        }
        var sequence = $("#sequence").sequence(options).data("sequence");
    }
</script>

Callbacks

Callbacks allow you to execute custom JavaScript functions during specific periods of Sequence's transitions.

Compete List of Callbacks

The following is the complete set of callbacks implemented within Sequence:

Callback Description
paused Executes after Sequence's autoPlay feature is paused
unpaused Executes after Sequence in unpaused and autoPlay resumes
beforeNextFrameAnimatesIn Executes before the next frame begins to animate in
afterNextFrameAnimatesIn Executes after the next frame has animated in (and becomes the current frame)
beforeCurrentFrameAnimatesOut Executes before the current frame begins to animate out
afterCurrentFrameAnimatesOut Executes after the current frame has animated out
beforeFirstFrameAnimatesIn Executes before the first frame animates in
afterFirstFrameAnimatesIn Executes after the first frame has finished animating in
beforeLastFrameAnimatesIn Executes before the last frame animates in
afterLastFrameAnimatesIn Executes after the last frame has finished animating in
afterLoaded Executes after Sequence has loaded

Using Callbacks to Execute Custom Functions

Callbacks are included in the options of each instance of Sequence, like so:

<script type="text/javascript"> 
    $(document).ready(function(){
        var options = {
            autoPlay: true,
            autoPlayDelay: 3000,
            beforeCurrentFrameAnimatesIn: function(){
            	alert("Do something before the CURRENT frame animates in"); //you can add the code to execute here...
            },
            beforeNextFrameAnimatesIn: function(){
            	myCustomFunction(); //...or specify a function
            }
        }
        var sequence = $("#sequence").sequence(options).data("sequence");
    }
    
    function myCustomFunction(){
    	alert("Do something before the NEXT frame animates in");
    }
</script>

Public Methods

Public methods are the functions and options that Sequence utilises, made available for developers to extend and enhance their particular implementation of it.

Public Functions

Function Name Description Arguments Example
goTo(id, direction) Causes Sequence to animate to a specific frame id (required): a number corresponding to a frame (the first frame has an id of 1).

direction (optional): Whether the frame being animated to should be considered as being ahead or behind the current frame.

Specifying a direction value of 1 will change the current frame from the "animate-in" position, to "animate-out", and the next frame will be changed from "start" to "animate-in".

Specifying a value of -1 will change the current frame from "animate-in" to the "start" position and the next frame will be changed from "animate-out" to "animate-in".

If a "direction" is not specified, Sequence will consider a frame with a higher id than the current frame as being ahead of it (1), and frames with a lower id will be considered as being behind (-1).
sequence.goTo(3, 1)
pause() If using autoPlay pause() will either pause or unpause that feature depending on its current state. None
sequence.pause()
next() Causes Sequence to animate to the next frame None
sequence.next()
prev() Causes Sequence to animate to the previous frame None
sequence.prev()
startAutoPlay(wait, newAutoPlayDelay) Start Sequences auto play feature if not already active wait(optional): A number in milliseconds to wait before autoPlay feature is started. If undefined, the value will be 0

newAutoPlayDelay (optional): The delay between frames automatically animating in/out. If undefined, the existing autoPlayDelay value will be used
sequence.startAutoPlay(1000, 3000)
stopAutoPlay() Stop Sequence from auto playing None
sequence.stopAutoPlay()
preloaderFallback() The default preloader consists of three images that are faded in and out using CSS3 transitions. Calling preloaderFallback() replicates the default preloader using jQuery and should be called after a Sequence slider is initiated. None
var sequence = $("#sequence").sequence(options)
.data("sequence");
if(!sequence.transitionsSupported){
	sequence.preloaderFallback();
}

Public Variables

Variable Description
sequence.container Returns the selector for Sequence's container element
sequence.currentFrame Returns the selector for the current frame
sequence.direction Returns the direction Sequence is currently animating in (1 = forward/-1 = reverse)
sequence.currentFrameChildren Returns an array containing the selectors for the current frame's child elements
sequence.currentFrameID Returns a number representing the current frames position in relation to all frames. 1 is the first frame
sequence.nextFrameID Returns a number representing the nextframes position in relation to all frames. 1 is the first frame
sequence.hasTouch Returns true or false depending on whether the device has touch capabilities
sequence.numberOfFrames Returns how many frames are in the Sequence container
sequence.prefix Returns the vendor prefix for the browser the user is viewing Sequence in
sequence.settings Returns an object containing Sequence's settings
sequence.transitionsSupported Returns true or false depending on whether the browser supports CSS3 transitions

Tips and Tricks

Vendor Prefixing

Coming soon