Touch Enabled Slider Plugin with jQuery and jQuery Mobile

A really simple jQuery and jQuery mobile based slider for creating a responsive content slider with support for touch swipe and mouse drag navigation.

How to use it:

1. Include jQuery library and jQuery mobile's JS and CSS files in your document.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

2. Make sure to include jQuery touch slider plugin after jQuery library.

<script src="scripts/jquery.slider-touch.js"></script>

3. Style the dots navigation via CSS. The plugin will automatically generate a dots navigation using <nav> tag.

.slider-demo nav {
position: absolute;
width: 100%;
margin-top: -70px;
}
.slider-demo nav ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
.slider-demo nav ul li {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #221f1f;
margin: 0 2px;
cursor: pointer;
}
.slider-demo nav ul li.on {
background-color: white;
}
<div>
<div class="box">slide 2</div>
</div>
<div>
<div class="box">slide 3</div>
</div>
</div>
</div>

4. Call the plugin.

$(document).ready(function () {
$('.slider-demo').sliderTouch({ 
nav: true // whether or not display the dots navigation.
});
});

---

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