Lightweight and Fully Customizable jQuery Slider Plugin - DIYSlider
File Size: | 4.35 KB |
---|---|
Views Total: | 1553 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.