jQuery Plugin To Load New Pages When You Swipe - Simple swiper
File Size: | 3.97 KB |
---|---|
Views Total: | 13699 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Simple Swiper is a lightweight plugin for jQuery and jQuery mobile that scrolls to next/previous page when you swipe (or mouse drag) left and right as seen on most mobile APPs.
How to use it:
1. Load the latest version of jQuery library and jQuery mobile's javascript and CSS in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" type="text/css"/>
2. Load the jQuery simple swiper plugin after jQuery library.
<script src="jquery.mobile.swiper.js" type="text/javascript"></script>
3. The Html. This plugin is applied to all data-role="page"
but only when a data-swipeleft
or data-swiperight
is also present. data-swipeleft
and data-swiperight
are elements that can be put into changePage
as a parameter.
<div data-role="page" data-swipeleft="page1.html"> <div data-role="header"> <h1>Title</h1> </div> <div data-role="content"> Main Content </div> </div>
This awesome jQuery plugin is developed by VolkerK. For more Advanced Usages, please check the demo page or visit the official website.