Psst! Want to check out the all new SlidesJS 3? Head over to: http://slidesjs.com/
Photo by: Michael Silberstein Source: http://www.flickr.com/photos/michaelsilberstein/4294842946/ Photo by: Shubert Ciencia Source: http://www.flickr.com/photos/bigberto/2857852001/ Photo by: Ed Yourdon Source: http://www.flickr.com/photos/yourdon/4133227641/ Photo by: Lee Source: http://www.flickr.com/photos/typicalnaloboy/4151014982/

Overview

SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

SlidesJS is provided with limited support but if you find a bug please submit an Issue with a brief description of the bug and a link to where it can be reviewed.

For general support please visit the SlidesJS User Group.

SlidesJS is compatible with all modern web browsers and jQuery versions 1.7-1.9.x.

Examples

These examples are also included in the download.

Docs

Basic markup

<!doctype html>
	<head>
		<title>Title</title>

		<style type="text/css" media="screen">
			.slides_container {
				width:570px;
				height:270px;
			}
			.slides_container div {
				width:570px;
				height:270px;
				display:block;
			}
		</style>

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

		<script>
			$(function(){
				$("#slides").slides();
			});
		</script>
	</head>
	<body>
		<div id="slides">
			<div class="slides_container">
				<div>
					<img src="http://placehold.it/570x270">
				</div>
				<div>
					<img src="http://placehold.it/570x270">
				</div>
				<div>
					<img src="http://placehold.it/570x270">
				</div>
				<div>
					<img src="http://placehold.it/570x270">
				</div>
			</div>
		</div>
	</body>
					

Options

preload (boolean)

Set true to preload images in an image based slideshow. Show example

$(function(){
	  $("#slides").slides({
	    preload: true
	  });
	});
Default value is false.

preloadImage (string)

Name and location of loading image for preloader. Show example

$(function(){
	  $("#slides").slides({
		preload: true,
		preloadImage: '/img/loading.gif'
	  });
	});
Default path is "/img/loading.gif".

container (string)

Class name for slides container. Show example

$(function(){
	  $("#slides").slides({
		container: 'slides_container'
	  });
	});
Default class name is "slides_container".

generateNextPrev (boolean)

Auto generate next/prev buttons. Show example

$(function(){
	  $("#slides").slides({
		generateNextPrev: true
	  });
	});
Default value is false.

generatePagination (boolean)

Auto generate pagination. Show example

$(function(){
	  $("#slides").slides({
		generatePagination: true
	  });
	});
Default value is true.

paginationClass (string)

Class name for pagination. Show example

$(function(){
	  $("#slides").slides({
		paginationClass: 'pagination'
	  });
	});
Default class name is "pagination".

currentClass (string)

Class name for current pagination item. Show example

$(function(){
	  $("#slides").slides({
		currentClass: 'current'
	  });
	});
Default class name is "current".

fadeSpeed (number)

Set the speed of the fading animation in milliseconds. Show example

$(function(){
	  $("#slides").slides({
		fadeSpeed: 350
	  });
	});
Default is 350 milliseconds.

fadeEasing (string)

Set the easing of the fade animation. Show example

$(function(){
	  $("#slides").slides({
		fadeEasing: "easeOutQuad"
	  });
	});
Must include Easing plugin in your project

slideSpeed (number)

Set the speed of the sliding animation in milliseconds. Show example

$(function(){
	  $("#slides").slides({
		slideSpeed: 350
	  });
	});
Default is 350 milliseconds.

slideEasing (string)

Set the easing of the sliding animation. Show example

$(function(){
	  $("#slides").slides({
		slideEasing: "easeOutQuad"
	  });
	});
Must include Easing plugin in your project

start (number)

Set which slide you'd like to start with. Show example

$(function(){
	  $("#slides").slides({
		start: 1
	  });
	});
Default is 1 and will start on the first slide.

effect (string)

Set effect, slide or fade for next/prev and pagination. If you use just one effect name it'll be applied to both or you can state two effect names. The first name will be for next/prev and the second will be for pagination. Must be separated by a comma. Show example

$(function(){
	  $("#slides").slides({
		effect: 'slide'
	  });
	});
$(function(){
	  $("#slides").slides({
		effect: 'slide, fade'
	  });
	});
Default effect is "slide", which will slide on both next/prev and pagination.

crossfade (boolean)

Crossfade images in a image based slideshow. Show example

$(function(){
	  $("#slides").slides({
		crossfade: true
	  });
	});
Default value is false.

randomize (boolean)

Set to true to randomize slides. Show example

$(function(){
	  $("#slides").slides({
		randomize: true
	  });
	});
Default value is false.

play (number)

Autoplay slideshow, a positive number will set to true and be the time between slide animation in milliseconds. Show example

$(function(){
	  $("#slides").slides({
		play: 5000
	  });
	});
Default value is 0 and is false.

pause (number)

Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in milliseconds. Show example

$(function(){
	  $("#slides").slides({
		pause: 2500
	  });
	});
Default value is 0 and is false.

hoverPause (boolean)

Set to true and hovering over slideshow will pause it. Show example

$(function(){
	  $("#slides").slides({
		hoverPause: true
	  });
	});
Default value is false.

autoHeight (boolean)

Set to true to auto adjust height. Show example

$(function(){
	  $("#slides").slides({
		autoHeight: true
	  });
	});
Default value is false.

autoHeightSpeed (number)

Set auto height animation time in milliseconds. Show example

$(function(){
	  $("#slides").slides({
		autoHeightSpeed: 350
	  });
	});
Default value is 350.

bigTarget (boolean)

Set to true and the whole slide will link to next slide on click. Show example

$(function(){
	  $("#slides").slides({
		bigTarget: true
	  });
	});
Default value is false.

animationStart() (callback)

Function called at the start of animation. Show example

$(function(){
	  $("#slides").slides({
		animationStart: function() {
			// Do something awesome!
		}
	  });
	});
Default value is empty.

animationComplete() (callback)

Function called at the completion of animation Show example

$(function(){
	  $("#slides").slides({
		animationComplete: function() {
			// Do something awesome!
		}
	  });
	});
$(function(){
	  $("#slides").slides({
		animationComplete: function(current) {
			// Get the "current" slide number
			// console.log(current);
		}
	  });
	});
Default value is empty.

Combining custom options

$(function(){
	  $("#slides").slides({
	    preload: true,
	    preloadImage: '/img/loading.gif',
	    play: 5000,
	    pause: 2500,
	    hoverPause: true
	  });
	});
Note: be sure to not include a ',' after the last line or you'll get an error in Internet Explorer.