Slides, A Slideshow Plugin for jQuery

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

If you find a bug please submit an Issue or email support with a brief description of the bug and a link to where it can be reviewed. Slides is provided with limited support. If you need support please visit the Slides User Group.

Slides is compatible with all modern web browsers and jQuery versions 1.4.4+.

Examples

These examples are also included in the download.

Download

Version 1.1.9
Updated September 5th, 2011

Have a great idea for Slides? Contribute on GitHub

If you have questions or find a bug just open a ticket on GitHub.

Has Slides made your life easier? Make a donation to help keep it going.

Following me on Twitter for news and updates on Slides.

Basic HTML Structure

<div id="slides">
  <div class="slides_container">
    <div>
      <h1>Slide 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

Basic CSS

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

Basic Initialization

<script>
  $(function(){
    $("#slides").slides();
  });
</script>

Defaults documentation

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.

next (string)

Class name for next button. Show example

$(function(){
  $("#slides").slides({
	next: 'next'
  });
});

Default class name is "next".

prev (string)

Class name for previous button. Show example

$(function(){
  $("#slides").slides({
	prev: 'prev'
  });
});

Default class name is "prev".

pagination (boolean)

If you're not using pagination you can set to false, but don't have to. Show example

$(function(){
  $("#slides").slides({
	pagination: true
  });
});

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.