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.4.4+.
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.
next (string)
Class name for custom next button. Show example
$(function(){
$("#slides").slides({
next: 'next'
});
});
<a href="#" class="next">Next</a>
Default class name is "next".
prev (string)
Class name for previous button. Show example
$(function(){
$("#slides").slides({
prev: 'prev'
});
});
<a href="#" class="prev">Prev</a>
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.
