SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions. Give it a try above and check out the demo tab to help you get started adding SlidesJS to your project.
Responsive
Create dynamic slideshows that adapt to any screen.
CSS3 transitions
Animations that run smoothly on modern devices.
Touch
Swipe support that tracks touch movements on supported devices.
$(function(){
$("#slides").slidesjs({
navigation: {
active: true,
// [boolean] Generates next and previous buttons.
// You can set to false and use your own buttons.
// User defined buttons must have the following:
// previous button: class="slidesjs-previous slidesjs-navigation"
// next button: class="slidesjs-next slidesjs-navigation"
effect: "slide"
// [string] Can be either "slide" or "fade".
}
});
});
pagination (object)
Pagination settings
$(function(){
$("#slides").slidesjs({
pagination: {
active: true,
// [boolean] Create pagination items.
// You cannot use your own pagination. Sorry.
effect: "slide"
// [string] Can be either "slide" or "fade".
}
});
});
play (object)
Play and stop button setting.
$(function(){
$("#slides").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "slide",
// [string] Can be either "slide" or "fade".
interval: 5000,
// [number] Time spent on each slide in milliseconds.
auto: false,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500
// [number] restart delay on inactive slideshow
}
});
});
effect (object)
Effects setting.
$(function(){
$("#slides").slidesjs({
effect: {
slide: {
// Slide effect settings.
speed: 200
// [number] Speed in milliseconds of the slide animation.
},
fade: {
speed: 300,
// [number] Speed in milliseconds of the fade animation.
crossfade: true
// [boolean] Cross-fade the transition.
}
}
});
});
callback (function)
SlidesJS callbacks.
$(function(){
$("#slides").slidesjs({
callback: {
loaded: function(number) {
// Do something awesome!
// Passes start slide number
},
start: function(number) {
// Do something awesome!
// Passes slide number at start of animation
},
complete: function(number) {
// Do something awesome!
// Passes slide number at end of animation
}
}
});
});
JS Tutorial
