Easy jQuery Draggable Content Slider Plugin - dragSlider
File Size: | 4.52KB |
---|---|
Views Total: | 12375 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An easy and lightweight jQuery slider plugin to create a content slider which supports mouse drag and arrow keys navigation.
Features:
- Mouse drag, arrow keys and bullets (pager) navigation.
- Configurable sliding effect and animation speed.
- Auto fit the image to the slider's size.
- Auto center the slider horizontally on your page.
- Multiple instances on one page.
How to use it:
1. Wrap the slide items in a wrapper.
<div id="slider-demo" class="slider"> <div> <ul> <li><img src="http://lorempixel.com/450/250/abstract/Slide-1/" alt=""/></li> <li><img src="http://lorempixel.com/450/250/fashion/Slide-2/" alt=" "/></li> <li><img src="http://lorempixel.com/450/250/nightlife/Slide-3/" alt=" "/></li> </ul> </div> </div>
2. Include the jQuery javascript library on the page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
3. Include jQuery dragSlider's script and stylesheet on the page, after jQuery library.
<link rel="stylesheet" href="dragslider.css" type="text/css" media="all"> <script type="text/javascript" src="dragslider.js"></script>
4. Initialize the plugin with options.
<script type="text/javascript"> $(function(){ $('#slider-demo').dragSlider({ numericId:'controlsSlider1', // unique name of the control element width : 450, // width of the slider height : 250, // height of the slider dragEffect : true, // if true enables the drag effect autoCenter : true, // if true center the slider horizontally imageAutoFit : true, // if true fit the image to the slider size speed : 200, // animation's speed useArrow : false, // if true use arrow to navigate }); }); </script>
This awesome jQuery plugin is developed by jd-development. For more Advanced Usages, please check the demo page or visit the official website.