SlidesJS - Elegant and User-friendly Slideshow Plugin

File Size: 2.8 MB
Views Total: 5642
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
SlidesJS - Elegant and User-friendly Slideshow Plugin

SlidesJS is a  Simple and Useful Slideshow Plugin built with Jquery for helping web designers create elegant and user-friendly slideshows.

How to Use:

1. Include jQuery script and jquery-latest.min.js before </head>

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

2. Call the function and we're ready to go.

$(function(){
  $("#slides").slides();
});

3. Add your own slide conttent to the sldier.

<div id="slides">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
  ...
</div>

4. The necessary CSS styles to prevents slides from flashing.

#slides {
  display:none;
}

5. Customize the slider with the following options.

width: 940,
height: 528,
start: 1,
navigation: {
  active: true,
  effect: "slide"
},
pagination: {
  active: true,
  effect: "slide"
},
play: {
  active: false,
  effect: "slide",
  interval: 5000,
  auto: false,
  swap: true,
  pauseOnHover: false,
  restartDelay: 2500
},
effect: {
  slide: {
    speed: 500
  },
  fade: {
    speed: 300,
    crossfade: true
  }
},
callback: {
  loaded: function() {},
  start: function() {},
  complete: function() {}
}

Changelog:

v3.0.3 (2013-04-29)

  • Added better crossfade

v3.0.3 (2013-04-29)

  • Added better crossfade

This awesome jQuery plugin is developed by nathansearles. For more Advanced Usages, please check the demo page or visit the official website.