Welcome to the SlidesJS v3.0.x beta site! To check out the current production version of SlidesJS goto http://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, CSS3 and touch supported slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

  • Responsive
  • CSS3 animations
  • Touch support
  • Easy setup


If you're looking for support please visit the SlidesJS forum. SlidesJS is distributed with limited support and on an "as is" basis.

If you're interested in contributing to the SlidesJS code base you can check it out on GitHub.

SlidesJS is compatible with all modern web browsers and jQuery 1.7.1+.

Examples

These examples are also included in the download.

Docs

<!doctype html>
<head>
  <style>
    #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();
    });
  </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>

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] Create the play and stop buttons.
        # You cannot use your own pagination.
      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
    }
  });
});

effect (object)

Effect setting. Show example

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

callback (function)

SlidesJS callbacks. Show example

$(function(){
  $("#slides").slidesjs({
    callback: {
      loaded: function() {
        # Do something awesome!
      },
      start: function() {
        # Do something awesome!
      },
      complete: function() {
        # Do something awesome!
      }
    }
  });
});

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'd 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. Most issues can be resolved by using your browsers built-in developer tools.