JS Tutorial
- Overview
- Documents
- Demos
Sequence - The Responsive Slider with Advanced CSS3 Transitions
Sequence 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!
Features
- Unique transition styles created using CSS3
- Supports all modern browsers
- Gracefully degrades in older browsers*
- Supports responsive layouts
- Supports touch devices and swiping
- Many developer features with even more to come
- Semantic and easy to use markup
- Open source
1. INCLUDE JS FILES
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="scripts/jquery.sequence-min.js"></script>
2. HTML
<div id="sequence">
<ul class="sequence-canvas">
<li>
<!--Frame 1 content here-->
</li>
<li>
<!--Frame 2 content here-->
</li>
<li>
<!--Frame 3 content here-->
</li>
</ul>
</div>
3. JAVASCRIPT
$(document).ready(function(){
var sequence = $("#sequence").sequence().data("sequence");
});
4. OPTONS
Sequence comes with many options that allow you to easily control its features.
Specifying Options
As explained in Initiate Sequence, each instance of Sequence 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: false,
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
Type: A number, Default: 1
The frame (the list item <li>) that should first be displayed when Sequence loads.
Type: true/false, Default: true
Whether Sequence should navigate to the first frame after the last frame and vice versa.
- true: When a user navigates forward from the last frame, Sequence will go to the first frame. Likewise, when a user navigates backwards from the first frame, Sequence will go to the last frame.
- false: When a user navigates forward from the last frame or backwards from the first frame, Sequence will not go to another frame.
Type: true/false, Default: false
Whether the first frame should animate in to its active position.
- 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.
Type: true/false or a number representing milliseconds, Default: false
Whether 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.
reverseAnimationsWhenNavigatingBackwards
Type: true/false, Default: 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).
preventDelayWhenReversingAnimations
Type: true/false, Default: false, Dependencies: reverseAnimationsWhenNavigatingBackwards: true
Assuming the total duration (the greatest transition-duration plus the greatest transition-delay) for an animation to complete in frame 2 is 1 second greater than frame 1, when the user navigates from frame 2 to frame 1 andreverseAnimationsWhenNavigatingBackwards is true, Sequence will apply that 1 second difference to frame 1 as a transition-delay. By doing this, Sequence creates a perfect reversal of animation. However, this delay may be bad for user experience because the users action won't immediately create an on-screen event. To avoid this, set preventDelayWhenReversingAnimations totrue.
Type: true/false, Default: 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 instance (bringing it to the top).
- false: frames will not have a z-index applied to them.
Type: true/false, Default: false
Cause Sequence to automatically change between frames over a period of time, as defined in autoPlayDelay.
- true: Sequence will automatically animate from frame to frame with a delay between each frame (specified using theautoPlayDelay option).
- false: Sequence will display the starting frame until a user chooses to navigate Sequence using next/previous buttons, swiping, etc.
Type: a number (1 = forward, -1 = reverse), Default:1, dependencies: autoPlay: true
The direction in which Sequence should auto play.
- 1: Sequence will navigate forwards, from frame to frame whilst autoPlay is true, providing Sequence is not paused.
- -1: Sequence will navigate backwards, from frame to frame whilst autoPlay is true, providing Sequence is not paused.
Type: a number representing milliseconds, Default: 5000, dependencies: autoPlay: true
The duration in milliseconds at which frames should remain on screen before animating to the next.
Navigation Skipping Options
Type: true/false, Default: true
Whether the user can navigate through frames before each frame has finished animating.
- true: the user can navigate to another frame whilst the current one is mid animation
- false: the user is prevented from navigating to another frame whilst the current one is mid animation
Type: a number representing time in milliseconds, Default: 150, dependencies: navigationSkip: true
Amount of time that must pass before the next frame can be navigated to. Example, if the user hits the next button, a period of 150ms (by default) must pass before they can navigate to another frame.
Type: true/false, Default: true, dependencies: navigationSkip: true
If a frame is skipped before it finishes animating, cause it to fade out over a specific period of time (see fadeFrameTime).
Type: a number representing time in milliseconds, Default: 250, dependencies: navigationSkip: true andfadeFrameWhenSkipped: true
How quickly a frame should fade out when skipped (in milliseconds).
Type: true/false, Default: false, dependencies: navigationSkip: true
Whether the user can change the direction of navigation during frames animating (if navigating forward, the user can only skip forwards when other frames are animating).
Next/Previous Button Options
Type: true/false or a CSS selector, Default: false
Defines a button that when clicked, causes the current frame to animate out and the next to animate in.
- true: use a next button with the default CSS selector (.sequence-next).
- false: don't use a next button.
- CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document.
Type: true/false, Default: true, dependencies: nextButton: true
- true: shown the next button as soon as Sequence is initiated.
- false: the next button won't be shown when Sequence is initiated (you may like to hide the button initially to fade the button in using CSS for example).
Type: true/false or a CSS selector, Default: false
Defines a button that when clicked, causes the current frame to animate out and the previous to animate in.
- true: use a previous button with the default CSS selector (.sequence-prev).
- false: don't use a previous button.
- CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document.
Type: true/false, Default: true, Dependencies: prevButton: true
- true: shown the previous button as soon as Sequence is initiated.
- false: the previous button won't be shown when Sequence is initiated (you may like to hide the button initially to fade the button in using CSS for example).
Pause Options
Type: true/false or a CSS selector, Default: false, Dependencies: autoPlay: true
A CSS selector that, when clicked, causes Sequence to pause the autoPlay feature.
- true: use a pause button with the default CSS selector (.sequence-pause).
- false: don't use a pause button.
- CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document.
Type: a number representing time in milliseconds, Default: same value as autoPlayDelay, Dependencies: autoPlay: trueand pauseButton: true or pauseButton: "<CSS selector>"
The time Sequence should wait before starting autoPlay again once the user unpauses Sequence. The default value is the same as autoPlayDelay.
Type: true/false, Default: true, dependencies: autoPlay: true
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.
Type: true/false or a CSS selector, Default: false, Dependencies: autoPlay: true
Display a pause icon when the user hovers over Sequence.
- true: use a pause icon with the default CSS selector (.sequence-pause-icon).
- false: don't display a pause icon.
- CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document.
Type: true/false, Default: true, dependencies: pauseButton: true
- true: shown the pause button as soon as Sequence is initiated.
- false: the pause button won't be shown when Sequence is initiated (you may like to hide the button initially to fade the button in using CSS for example).
Pagination Options
Type: true/false or a CSS selector, Default: false
Pagination associates child elements within the pagination selector (.sequence-pagination by default) to each frame of Sequence. When a child element is clicked, Sequence will navigate to the frame that is associated with that child element. If pagination istrue, the following HTML can be included in your document to act as pagination:
<ul class="pagination">
<li>Frame 1</li>
<li>Frame 2</li>
<li>Frame 3</li>
</ul>
When the first <li> element is clicked, Sequence will navigate to its first frame. When the second is clicked, Sequence will navigate to its second frame, and so on.
The pagination and pagination children can consist of any element. So, if you'd prefer, you could use <div> elements instead of<ul> and <li> elements.
When a Sequence frame is navigated to (via any navigation method, such as clicking pagination links, pressing a keyboard key etc), the associated pagination link will be given a class of current, so you can style the current pagination link as you wish:
HTML:
<ul class="sequence-pagination">
<li>Frame 1</li>
<li class="current">Frame 2</li>
<li>Frame 3</li>
</ul>
CSS:
.sequence-pagination .current {
font-weight: bold;
}
- true: Use pagination with the default CSS selector (.pagination).
- false: don't use pagination.
- CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document.
Type: true/false, Default: true, dependencies: pagination: true
- true: shown pagination as soon as Sequence is initiated.
- false: the pagination won't be shown when Sequence is initiated (you may like to hide pagination initially to fade it in using CSS for example).
Preloader Options
Type: true/false or a CSS selector, Default: false
- true: Use the preloader and styles with the CSS selector (.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 using preloader: true, the following default preloading HTML and CSS 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>
CSS:
.sequence-preloader {
height: 100%;
position: absolute;
width: 100%;
z-index: 999999;
}
@keyframes preload {
0%{
opacity: 1;
}
50%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.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;
}
Note: Vendor prefixes are omitted from the above CSS for brevity but should be used for cross browser compatibility.
Type: An integer array containing a list of frame numbers, Default: [1], Dependencies: preloader: 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]
Type: A string array containing a list of image sources, Default: [], Dependencies: preloader: 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 (via the preloadTheseFrames option), as well as an image from frame 2 and an image in the footer of the page:
preloadTheseFrames: [1],
preloadTheseImages: [
"images/frame2image.png",
"images/footer-logo.png"
]
Note: Only images on the page are preloaded. As yet, you can't preload a background image applied via CSS.
Type: true/false, Default: true, Dependencies: preloader: 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.
Type: true/false, Default: true, Dependencies: preloader: true
- true: Sequence will add a CSS class of preloading-complete to the preloader element (.sequence-preloader by default, unless you've used your own CSS selector with the preloader option), allowing you to hide that preloader using a CSS3 transition. Example:
.preloading-complete {
display: none;
opacity: 0;
visibility: hidden;
transition-duration: 1s;
}
Note: Vendor prefixes are omitted from the above CSS for brevity but should be used for cross browser compatibility.
The above CSS will cause the preloader element to fade out over a 1 second duration and then become hidden.
Type: a number representing time in milliseconds, Default: 0, Dependencies: preloader: true andhidePreloaderUsingCSS: true
The number of milliseconds to wait after the preloader has been hidden before initiating the first animation.
Keyboard Options
Type: true/false, Default: true
Whether to allow the user to navigate between frames using the left and right arrow keys.
Type: true/false, Default: true
Whether Sequence should go to a specific frame when the user presses a numeric key. Pressing 1 goes to frame 1 etc.
Type: An object or false
The public Sequence method that should occur when the left or right arrow keys are pressed.
Currently, the public methods supported by this option are prev(), next() and pause().
- An object:
Example:
keyEvents {
left: "prev",
right: "next"
}
In this example, when the left keyboard key is pressed, Sequence's public method prev() will be initiated. When the right keyboard key is pressed, the next() public method will be initiated.
- false: no keyboard events
Type: An object, Default: no default
An object containing the keyCodes and public methods that should occur when certain keys are pressed.
Currently, the public methods supported by this option are prev(), next() and pause().
Example:
customKeyEvents {
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.
Touch Swipe Options
Type: true/false, Default: true
Whether to allow the user to navigate between frames by swiping left and right on touch enabled devices.
Type: A number representing pixels, Default: 20
The number of pixels that the user's finger must move across before a swipe event is triggered.
The default of 20, means the user must move their finger at least 20 pixels before a swipe event is recognised.
Type: true/false, Default: false
- true: when a user swipes their finger over an instance of Sequence, the page will be prevented from scrolling.
- false: the browser will will continue with it's default behaviour when a swipe occurs.
Note: Be careful with this option if true, make sure the user can touch an area of the page that still allows them to scroll.
swipeEvents
Type: An object or false, Default: {left: "prev", right: "next", up: false, down: false}
The public Sequence method that should occur when the user swipes in a particular direction.
Currently, the public methods supported by this option are prev(), next() and pause().
Default object:
swipeEvents {
left: "prev",
right: "next",
up: false,
down: false
}
In this example, when the user swipes left, Sequence's public method prev() will be initiated. When the user swipes right, thenext() public method will be initiated. No event will occur when the user swipes up or down.
- false: no swipe events.
Hash Tag Options
The hash tag 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/jquery.sequence-min.js"></script>
hashTags
Type: true/false, Default: false
- true: when a frame is navigated to and becomes active, the hash tag will change to reflect the frames ID.
In the following example, when the second frame becomes active, the URL will be changed to end with the hashTag #second-frame. The name "second-frame" is taken from the list item's ID attribute.
<div id="sequence">
<ul>
<li id="intro">
<h2 class="title">Built using Sequence.js</h2>
</li>
<li id="second-frame">
<h2 class="title animate-in">Super awesome!</h2>
</li>
</ul>
</div>
- false: the hash tag will not change.
hashDataAttribute
Type: true/false, Default: false, Dependencies: hashTags: true
- true: the hash tag name, will not be taken from the list item's ID attribute but instead a data attribute called data-sequence-hashtag.
In the following example, when hashDataAttribute is true and the first frame becomes active, the URL will be changed to end with the hash tag #superAwesome.
<div id="sequence">
<ul>
<li id="intro" data-sequence-hashtag="superAwesome">
<h2 class="title animate-in">Built using Sequence.js</h2>
</li>
</ul>
</div>
- false: Use the ID attribute instead of the data attribute.
hashChangesOnFirstFrame
Type: true/false, Default: false, Dependencies: hashTags: true
Whether the hash tag should be changed when the first frame becomes active.
-
true: The hash tag will change as soon as the first frame reaches its "animate-in" position.
- false: The hash tag will not change when the first frame becomes active but will change for every other frame after that.
Fallback Theme for Legacy Browsers
The fallback theme options control Sequence when it is being viewed in browsers that do not support CSS3 transitions. Please seecaniuse.com for CSS3 transition browser compatibility.
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>
Fallback Options
Type: slide or fade, Default: slide
The name of the fallback theme to be used when the browser doesn't support CSS3 transitions.
- slide: Causes frames to slide left and right.
- fade: Causes a 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).
Type: a number representing milliseconds, Default: 500
The speed at which frames should transition when in a browser that does not support CSS3 transitions.
5. CALLBACKS
Callbacks allow you to execute custom JavaScript functions at specific key points.
Specifying Callbacks
By using the variable that the Sequence object is stored in, you can add custom code to Sequence's callbacks, like so:
<script type="text/javascript">
$(document).ready(function(){
var options = {
autoPlay: true,
autoPlayDelay: 3000
}
var sequence = $("#sequence").sequence(options).data("sequence");
sequence.beforeCurrentFrameAnimatesOut = function(){
//add code to execute here, such as:
alert("Do something before the CURRENT frame animates out");
};
sequence.beforeNextFrameAnimatesIn = function(){
//add code to execute here, such as:
alert("Do something before the NEXT frame animates in");
};
});
</script>
Complete List of Callbacks
The following is the complete set of callbacks implemented within Sequence:
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
afterLoaded() Executes after Sequence has loaded
destroyed() Executes once Sequence has finished being destroyed via the .destroy() function
6. METHODS
goTo(id, direction, ignoreTransitionThreshold)
Causes Sequence to animate to a specific frame.
Arguments:
- 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.
- 'ignoreTransitionThreshold' (optional): if true, ignore the transitionThreshold setting and immediately go to the specified 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". 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).
Examples:
sequence.goTo(3, 1); //navigate forwards to frame 3 sequence.goTo(2, -1); //navigate backwards to frame 2
pause()
Dependencies: autoPlay: true
pause() will either pause or unpause Sequence's autoPlay feature depending on its current state.
Example:
sequence.pause()
unpause()
Dependencies: autoPlay: true
unpause() will unpause Sequence's autoPlay feature when paused.
Example:
sequence.unpause()
next()
Causes Sequence to animate to the next frame.
Example:
sequence.next()
prev()
Causes Sequence to animate to the previous frame.
Example:
sequence.prev()
startAutoPlay(delay)
Start Sequences auto play feature if not already active.
Arguments:
- delay (optional): A number in milliseconds to wait before the autoPlay feature is started. If undefined, the delay will be the same as autoPlayDelay.
Example:
sequence.startAutoPlay(1000); //start Sequence's autoPlay feature after 1 second (1000 milliseconds).
stopAutoPlay()
Stop Sequence from auto playing.
Example:
sequence.stopAutoPlay()
destroy(navigation, callback)
Remove Sequence from the element it is hooked on to, along with events and other related elements such asnavigation.
Arguments:
- navigation (optional): if false, Sequence won't remove navigation elements such as next and previous button. Navigation elements will be removed by default.
- callback (optional): a callback to execute after the .destroy() function has finished. You can also use the public callback.destroyed().
7. VARIABLES
Public variables can be used to get certain information about the state of Sequence, for example, the ID of the current frame.
Using Public Variables
Public variables can be taken from the variable the Sequence object is saved in to, like so:
alert(sequence.currentFrameID);
List of Public Variables
active Type: true/false Returns whether Sequence is currently animating
canvas Type: Object Returns the object for Sequence's canvas element, the <ul>.
container Type: Object Returns the object for Sequence's container element.
currentFrame Type: Object Returns the current frame object.
currentFrameID Type: Number Returns a number representing the current frames position in relation to all frames. 1 is the first frame.
direction Type: Number Returns the direction Sequence is currently animating in (1 = forward/-1 = reverse).
frames Type: Object Returns each of Sequence's frames, the top level <li> elements.
hasTouch Type: true/false Returns true or false depending on whether the device has touch capabilities.
isBeingHoveredOver Type: true/false Returns true or false depending on whether the Sequence canvas is currently being hovered over.
isPaused Type: true/false Returns true or false depending on whether Sequence is paused (the autoPlay function is not active)
nextButton Type: Object Returns the next button object
nextFrame Type: Object Returns the next frame object (the next <li>)
nextFrameID Type: Number Returns a number representing the nextframes position in relation to all frames. 1 is the first frame.
numberOfFrames Type: Number Returns how many frames are in the Sequence container.
pauseButton Type: Object Returns the pause button object
pauseIcon Type: Object Returns the pause icon object
prefix Type: Text Returns the vendor prefix for the transition property of the browser Sequence is being viewed in, such as "-webkit-" or "" when the browser no longer requires a prefix for transition.
prevButton Type: Object Returns the previous button object
settings Type: Object Returns an object containing Sequence's settings - the developer's options merged with the defaults (note that the developer's options take precedence over the defaults).
transitionsSupported Type: true/false Returns true or false depending on whether the browser supports CSS3 transitions.
