Lightweight and Fully Customizable jQuery Slider Plugin - DIYSlider

DIY Slider is introduced as the most lightweight and customizable jQuery slider plugin that transforms a bunch of divs into a slidable thingy with a whole lot of options, methods and events.

Basic Usage:

1. Include jQuery library and jQuery DIY Slider Plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.diyslider.min.js"></script>jquery.diyslider.min.js

2. The html

<div class="slider"><!-- the slider -->
<div>
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
</div>
</div>

3. Initialize the plugin with options

// initialize the slider
$(".slider").diyslider({
    width: "400px",
    height: "400px",
    animationEasing: "linear",
    animationDuration: 2000,
    animationAxis: "y"
});

// set up a timer to change slides automatically
$(".slider").diyslider("move", "forth");
setInterval(function(){
    $(".slider").diyslider("move", "forth");
}, 2000);

4. Options

$(".slider").diyslider({
width: '500px'
height: '300px'
animationAxis: 'x', // Axis of the animation. Slides can be animated horizontally or vertically ('x' or 'y').
animationDuration: 1000, // Duration of the animation between slides in milliseconds. Set to 0 for an instant change (no animation).
animationEasing: 'swing', // Easing function used for the animation. If you want more easing functions than 'swing' and 'linear', you should have a look at jQuery UI.
loop: true, // Whether to loop on slides or not.
display: 1, // Number of slides displayed at once in the slider's frame.
start: default: 1 // What slide to start at. Will default to 1 if an invalid slide number is given.
});

---

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