Touch Enabled Slider Plugin with jQuery and jQuery Mobile

File Size: 3.66KB
Views Total: 4800
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="">
<script src=""></script>
<script src=""></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 class="box">slide 2</div>
<div class="box">slide 3</div>

4. Call the plugin.

$(document).ready(function () {
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.