Slides is a crazy simple slideshow plugin for jQuery. With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination. With Slides you’ll never see multiple slides fly by. Slides elegantly just slides from one slide to the next. Awesome.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 1 commit behind nathansearles:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


SlidesJS version 2.0 beta 1

SlidesJS version 2.0 beta 1 is not meant for production deployment.

For the current production ready version of SlidesJS visit

Created by Nathan Searles,

Support forum

© 2011 by Nathan Searles

SlidesJS 2 Demos

Soon to be added demos

  • Carousel Style
    • 3 or 4 items per slide, could be album covers or similar
  • Thumbnails
    • Pagination with thumbnails
  • Captions
    • Image slideshow with captions
  • Side Navigation
    • With vertical slideshow
  • Play/pause
    • Image slideshow with play/pause button, pagination, next/prev buttons

SlidesJS 2 documentation

Basic Markup Structure

For just images you can simply use:

<div id="slides">
 <img src="" width="570" height="270" alt="Slide 1">
 <img src="" width="570" height="270" alt="Slide 2">
 <img src="" width="570" height="270" alt="Slide 3">
 <img src="" width="570" height="270" alt="Slide 4">

Or you can use <div>s for your slides

<div id="slides">
  <img src="" width="570" height="270" alt="Slide 1">
  <img src="" width="570" height="270" alt="Slide 2">
  <img src="" width="570" height="270" alt="Slide 3">
  <img src="" width="570" height="270" alt="Slide 4">

Simple as that. No extra <div>s, no navigation or pagination to define, it’s all created for you. SlidesJS creates two <div>s for the slideshow, “.slidesContainer” and “.slidesControl”, both are required and can not be changed.

Navigation classes are “.slidesPrevious” and “.slidesNext” and are created as anchor tags. These cannot be changed.

Pagination uses an unordered list markup structure. The <ul> has a class of “.slidesPagination”. This cannot be changed.

You may define your own navigation or pagination, but they must use the same class names, sorry it saves from including extraneous code.

Basic CSS

No CSS required. Shit yeah!

Initialize SlidesJS


Tip: With SidesJS 2 you need to define the width and height if it’s different from the default (780px x 300px). This resolves many issues having to do with loading and makes SlidesJS 2 self contained, not requiring any CSS.

    width: 640,
    height: 480

Method Calls – The good stuff







Next, using default effect


Next, define effect, “slide” or “fade”


Previous, uses default effect


Previous, define effect, “slide” or “fade”


Goto slide 2 using default effect


Goto slide 2 define effect, “slide” or “fade”








Returns JSON object:

current: 4,
state: “playing”,
total: 7

The follow could also be used


returns: number


returns: string, playing, paused, stopped, undefined


returns: number


width: 780, // [Number] Define the slide width
responsive: false, // [Boolean] slideshow will scale to its container
height: 300, // [Number] Define the slide height
navigation: true, // [Boolean] Auto generate the naviagation, next/previous buttons
pagination: true, // [Boolean] Auto generate the pagination
effects: {
 navigation: "slide",  // [String] Can be either "slide" or "fade"
 pagination: "slide" // [String] Can be either "slide" or "fade"
direction: "left", // [String] Define the slide direction: "Up", "Right", "Down", "left"
fade: {
 interval: 1000, // [Number] Interval of fade in milliseconds
 crossfade: false, // [Boolean] TODO: add this feature. Crossfade the slides, great for images, bad for text
 easing: "" // [String] Dependency: jQuery Easing plug-in <>
slide: {
 interval: 1000, // [Number] Interval of fade in milliseconds
 browserWindow: false, // [Boolean] Slide in/out from browser window, bad ass
 easing: "" // [String] Dependency: jQuery Easing plug-in <>
preload: {
 active: true, // [Boolean] Preload the slides before showing them, this needs some work
 image: "../img/loading.gif" // [String] Define the path to a load .gif, yes I should do something cooler
startAtSlide: 1, // [Number] What should the first slide be?
playInterval: 5000, // [Number] Time spent on each slide in milliseconds
pauseInterval: 8000, // [Number] Time spent on pause, triggered on any navigation or pagination click
autoHeight: false // [Boolean] TODO: add this feature. Auto sets height based on each slide


Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
See the License for the specific language governing permissions and
limitations under the License.


  • 2.0 beta 1
    • Complete rewrite using method based pattern
  • 1.1.8
    • Fixed: bug with preloading image and starting at a slide other then the first
  • 1.1.7
    • Added currentClass default, thanks arronmabrey!
  • 1.1.6
    • Fixed: bug with slidesLoaded function
  • 1.1.5
    • New: option called slidesLoaded, a function that is called when Slides is fully loaded
  • 1.1.4
    • Fixed: Minor bug with loading image not being removed
    • Added: animationStart() now gets passed the current slide number
    • Updated: Examples now use jQuery 1.5.1
  • 1.1.3
    • New: Support for jQuery’s easing plugin
      • Added: fadeEasing and slideEasing defaults
    • Cleaned up JavaScript using
    • Fixed: Minor bug with hoverPause
  • 1.1.2
    • Changed: Width and Height is set in the CSS rather then the JavaScript
    • New: Added some helpful comments to example CSS
    • Fixed: Flash of slide content in IE
    • Updated: Better loading structure
  • 1.1.1
    • New: Width and height is now a required attribute
      • This fixes numerous issues with blank slides and height
    • New: Rewrote image loading
      • Now supports multiple parent elements
      • Fixed other minor bugs
    • Fixed: Images should no longer flicker in IE
  • 1.1.0
    • Fixed: Issue with images and captions example in IE6/7
  • 1.0.9
    • Fixed: Using fade effect, crossfade and autoheight now works properly
  • 1.0.8
    • Fixed: IE6/7 JavaScript error related to the pagination
  • 1.0.7
    • New: Link to a slide from a slide. Check out /examples/Linking/ in the download
    • New: Deeplinking example added. Check out /examples/Linking/ in the download
    • Changed: Pagination no longer uses rel attribute, it now just uses href with hash
  • 1.0.6
    • Changed: Pagination now targets the rel attribute versus using :eq()
  • 1.0.5
    • New: Current slide number passed to animationComplete()
  • 1.0.4
    • Fixed: start option bug
    • New: error correction for start option
  • 1.0.3
    • Fixed: bugs related to auto height
    • New: animationStart() and animationComplete() added
  • 1.0.2
    • Fixed: bug with static pagination
  • 1.0.1
    • New: boolean to auto generated Next/Prev buttons
    • Width attribute is no longer set for main element
    • Fixed: pagination bug, it was set to false, should be true by default
  • 1.0
    • Initial release