Touch Enabled Slider Plugin with jQuery and jQuery Mobile
File Size: | 3.66KB |
---|---|
Views Total: | 4795 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.