Customizable jQuery Slideshow/Carousel Plugin - sliders.js

sliders.js is a powerful jQuery slider resolution to create slideshow/carousel with lots of options/methods to customize.

Features:

• Autoplay the slideshow/carousel on page loaded.
• Slide or fade transition effects. Allows multiple transitions to be queued.
• Allow keyboards to control (next/prev/play/pause).
• Easing options supported.

How to use it:

1. Include jQuery library and jQuery slider.js script in the page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sliders.js"></script>

2. Create the html for a image slideshow with controls.

<div id="slideshow">
<img alt="Photo 1" src="http://lorempixel.com/400/300/business" />
<img alt="Photo 2" src="http://lorempixel.com/400/300/nature" />
<img alt="Photo 3" src="http://lorempixel.com/400/300/sports" />
<img alt="Photo 4" src="http://lorempixel.com/400/300/food" />
<img alt="Photo 5" src="http://lorempixel.com/400/300/people" />
</div>

<div class="slideshow-controls">
<a href="#previous" id="slideshow-previous" name="slideshow-previous">&larr;</a>
<a href="#1" class="slideshow-slide">1</a>
<a href="#2" class="slideshow-slide">2</a>
<a href="#3" class="slideshow-slide">3</a>
<a href="#4" class="slideshow-slide">4</a>
<a href="#5" class="slideshow-slide">5</a>
<a href="#next" id="slideshow-next" name="slideshow-next">&rarr;</a>
<a href="#play-pause" class="pause" id="play-pause">pause</a>
</div>

3. Style the image slideshow via CSS.

#slideshow {
width: 400px;
height: 300px;
margin-top: 20px;
border: 1px solid #ccc;
}
#slideshow img {
display: block;
width: 400px;
height: 300px;
}
.slideshow-controls {
margin: 0.5em 0;
}
.slideshow-controls a,  .slideshow-controls span {
display: inline-block;
padding: 3px 5px;
background-color: #eee;
border: 1px solid #e0e0e0;
border-radius: 3px;
font-size: 12px;
}
.slideshow-controls span {
float: right;
}
.slideshow-controls a:hover {
background-color: #efefef;
border-color: #bbb;
color: #111;
}
.slideshow-controls a.selected {
color: #000;
background-color: #fff;
border-color: #bbb;
}

4. Initialize the slideshow with options.

<script type="text/javascript">

$(document).ready(function(evt) {

// Initialize the plugin

$('#slideshow').sliders();

// The javascript for controls

$('a.slideshow-slide:first').addClass('selected')


$('.slideshow-controls a.slideshow-slide').click(function(evt) {
  evt.preventDefault();
  var i = parseInt($(this).attr('href').replace('#', '')) - 1;
  $('#slideshow').sliders('goto', i);
});

$('#slideshow-previous, #slideshow-next').click(function(evt) {
  evt.preventDefault();
  $('#slideshow').sliders($(this).attr('href').replace('#', ''));
});
  
$('#play-pause').click(function(evt) {
  evt.preventDefault();
  var cmd = this.className;
  $('#slideshow').sliders(cmd)
});

$('#slideshow').change(function(evt, index, status) {
  $('a.slideshow-slide').removeClass('selected').filter(function(i, element) {
return index == i;
  }).addClass('selected');
  update(index, status);
});

$('#slideshow').bind('play', function(evt, index, status) {
  update(index, status);
});

$('#slideshow').bind('pause', function(evt, index, status) {
  update(index, status);
});

});

</script>

5. All the options.

$('#slideshow').sliders({  
transition:     'slide', // slide or fade
queue:          false,   // allow multiple transitions to be queued
delay:          5000,    // time each slide is shown (milliseconds)
speed:          450,     // time of transition (milliseconds)
first:          0,       // initial slide to start on
ease:           'swing', // transition ease
play:           true,    // auto-play the slideshow
keyboardEvents: true     // allow keyboard to control (next/prev/play/pause)
});

6. Available methods.

('#slideshow').sliders('play');            // plays the slider
$('#slideshow').sliders('pause');           // pauses the slider
$('#slideshow').sliders('toggle');          // plays if paused, pauses if playing
$('#slideshow').sliders('goto', 4);         // goes to the fourth slide (zero index)
$('#slideshow').sliders('goto', 'next');    // goes to the next slide
$('#slideshow').sliders('goto', 'last');    // goes to the last slide
$('#slideshow').sliders('advance', 2);      // skips ahead two slides
$('#slideshow').sliders('enableKeyboard');  // enables keyboard control (arrow keys for next/prev and spacebar for play/pause)
$('#slideshow').sliders('disableKeyboard'); // disables keyboard control
$('#slideshow').sliders('toggleKeyboard');  // toggles keyboard control
$('#slideshow').sliders('hide');            // pauses, disables keyboard events then hides the slider
$('#slideshow').sliders('show');            // shows the slider and resumes playing if play option is true

---

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