Easy jQuery Draggable Content Slider Plugin - dragSlider

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.