Customizable jQuery Slideshow/Carousel Plugin - sliders.js

File Size: 6.58KB
Views Total: 3022
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.