Touch-slider
A responsive slider based on jQuery Mobile Touch Events.
Demo
##Instalation
First we need to add a jQuery reference. Just put the following lines between HTML <header></header> tags.
<script src="scripts/jquery-1.10.2.min.js"></script> <script src="scripts/jquery.mobile.custom.min.js"></script>Then, add a rp.touch-slider.js script
<script src="scripts/rp.touch-slider.js"></script>##Usage It's simple to use, just follow this HTML Pattern.
<div class="slider"> <div class="slider-wrap"> <div><div class="box">slider 1</div></div> <div><div class="box">slider 2</div></div> <div><div class="box">slider 3</div></div> </div> </div>Inside of the head tags put the following snippet between <script type="text/javascript"></script>
$(document).ready(function () { $('.slider').sliderTouch(); });This will be initialize the plugin. ###Parameters
| name | type | description |
|---|---|---|
| nav | string | A string describing the type of navigation. Options: dots, arrows, both or none. |
| prevValue | string | A value that will be inserted into the previous link. |
| nextValue | string | A value that will be inserted into the next link. |
| autoPlay | bol | If true, the panels will be changed automatically |
| interval | int | A number determining how long the panel will be displayed |
Ecxample:
$(document).ready(function () { $('.slider').sliderTouch({ nav: "both", prevValue:"<", nextValue:">", autoPlay:false, interval:4000 }); });##CSS style
And finally, just add few styles to customize the slider. You can style it anyway you want
.slider {margin:auto;overflow:hidden;width:100%; height:400px; background-color:#221f1f;} .slider .slider-wrap {height:inherit; overflow: hidden;} .slider .box {margin:70px auto 0; width:500px; height:260px;} .slider nav.dots {position:absolute; width:100%; margin-top: -40px;} .slider nav.dots ul {text-align: center; list-style: none; margin: 0; padding: 0;} .slider nav.dots ul li{display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #565656; margin: 0 2px;cursor: pointer;} .slider nav.dots ul li.on{background-color:white;} .slider nav.arrows {position:absolute; width:100%; margin-top: -40px} .slider nav.arrows ul {text-align: center; list-style: none; margin: 0; padding: 0;} .slider nav.arrows ul li{display: inline-block; padding: 10px; margin:0 10px; background: #f16272; cursor: pointer; color:#fff;} 
