SlidesJS
SlidesJS is obsolete and no longer maintained.
Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/ Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/ Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/ Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/

SlidesJS is obsolete and no longer maintained

This site is kept around for archival purposes. ✌️

Overview

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions. Give it a try above and check out the examples to help you get started adding SlidesJS to your project.

  • Responsive

    Create dynamic slideshows that adapt to any screen.

  • CSS3 transitions

    Animations that run smoothly on modern devices.

  • Touch

    Swipe support that tracks touch movements on supported devices.

  • Easy setup

    Get going fast with the easy-to-use examples.

Download

Want to contribute to SlidesJS? Check it out at GitHub.

Docs

Basic markup

<!doctype html>
<head>
  <style>
    /* Prevents slides from flashing */
    #slides {
      display:none;
    }
  </style>

  <script src="//code.jquery.com/jquery-latest.min.js"></script>
  <script src="jquery.slides.min.js"></script>

  <script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528
      });
    });
  </script>
</head>
<body>
  <div id="slides">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
  </div>
</body>

Options

width (number) & height (number)

Set width and height of the slideshow. Show example

$(function(){
  $("#slides").slidesjs({
    width: 700,
    height: 393
  });
});
This must be defined.

start (number)

Set the first slide in the slideshow. Show example

$(function(){
  $("#slides").slidesjs({
    start: 3
  });
});
Default value is 1.

play (object)

Play and stop button setting. Show example

$(function(){
  $("#slides").slidesjs({
    play: {
      active: true,
        // [boolean] Generate the play and stop buttons.
        // You cannot use your own buttons. Sorry.
      effect: "slide",
        // [string] Can be either "slide" or "fade".
      interval: 5000,
        // [number] Time spent on each slide in milliseconds.
      auto: false,
        // [boolean] Start playing the slideshow on load.
      swap: true,
        // [boolean] show/hide stop and play buttons
      pauseOnHover: false,
        // [boolean] pause a playing slideshow on hover
      restartDelay: 2500
        // [number] restart delay on inactive slideshow
    }
  });
});

effect (object)

Effects setting. Show example

$(function(){
  $("#slides").slidesjs({
    effect: {
      slide: {
        // Slide effect settings.
        speed: 200
          // [number] Speed in milliseconds of the slide animation.
      },
      fade: {
        speed: 300,
          // [number] Speed in milliseconds of the fade animation.
        crossfade: true
          // [boolean] Cross-fade the transition.
      }
    }
  });
});

callback (function)

SlidesJS callbacks. Show example

$(function(){
  $("#slides").slidesjs({
    callback: {
      loaded: function(number) {
        // Do something awesome!
        // Passes start slide number
      },
      start: function(number) {
        // Do something awesome!
        // Passes slide number at start of animation
      },
      complete: function(number) {
        // Do something awesome!
        // Passes slide number at end of animation
      }
    }
  });
});