SlidesJS
Welcome to the all new SlidesJS 3.0! Are you looking for the previous SlidesJS documentation? Head over to http://archive.slidesjs.com/.
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/

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 Donate

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="http://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
      }
    }
  });
});

Support

Basic support is available at the SlidesJS forum. Many requests are resolved by other SlidesJS users, but assistance is not guaranteed.

If you're in need of direct assistance or would like customization added to SlidesJS, Premium Support is available for $100. Premium support provides you direct email access and allows for up to 1 hour of support. Premium Support is typically provided within 3-7 days. A resolution to the support request is not guaranteed.

Faq

Are there any other effects besides slide or fade?

To keep SlidesJS as simple as possible, it only includes a slide or fade effect. Adding other effects would over complicate and bloat the plugin.

Can I use SlidesJS on a commercial site or include it in a template that I'm selling?

Yes you can, but you must keep the copyright and licensing information with the plugin. And if you've found SlidesJS useful, it would awesome if you'd show your support by giving a donation. If you have additional questions about licensing check out the Apache license which SlidesJS is licensed under.

I can't figure out how to add SlidesJS to my site. Can you help me?

SlidesJS requires some basic understanding of HTML, CSS and jQuery. If you need help with adding SlidesJS to your site please post a question at the SlidesJS forum.

Premium Support is available for $100 and provides you direct email access and allows for up to 1 hour of support. Premium Support is typically provided within 3-7 days. A resolution to the support request is not guaranteed.

Can I uses SlidesJS on my website?

Yes you can, that's what it's for, but you must keep the copyright and licensing information with the plugin.