pagingSlider

=======================

What is it?

pagingSilder brings you Hardware-Accelerated Page Transitions for Web / Mobile Web Apps / PhoneGap Apps. Inspired by http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/ I have written an extension. This extension allows the page slider to control several pages, retrieve individual pages and slide from one side to another.

Why singleton pattern?

Using singleton pattern as class object makes the integration easy in the common way. Also singleton pattern does not block a multiple use per page. You are able to create new instances of pagingSlider object like "var myPagingSlider = pagingSlider;".

Demo

http://www.linslin.org/2015/01/13/css-hardware-accelerated-page-transitions/

Features

slide to pages with touch swipes by using Hardware-Accelerated Page Transitions
auto switch to pages by clicking menu item
call pages directly
animated mobile pagebrowser
integrated touch events with quoJS
loop functionality
disable/enable pointer foot menu
multi sliders on one page support

Install via bower

bower install linslin-pagingslider

Useage

Checkout and run app/index.html in Browser.
Modify the Template
Take a look at the demo directory for cordova-, web-examples & configurations

<html>
<head>
    <title>pagingSlider</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<h3>pagingSlider example</h3>
<div id="wrapper">
    <div class="slidepage-container myPageContainerClass">
        <div id="badges-slidepage-1" page="1" class="psPage center current">
            <div class="content">
               <h2>Page 1</h2>
            </div>
        </div>
        <div id="badges-slidepage-2" page="2" class="psPage right">
            <div class="content">
               <h2>Page 2</h2>
            </div>
        </div>
        <div id="badges-slidepage-3" page="3" class="psPage right">
            <div class="content">
               <h2>Page 3</h2>
            </div>
        </div>
        <div id="badges-slidepage-4" page="4" class="psPage right">
            <div class="content">
               <h2>Page 4</h2>
            </div>
        </div>
    </div>
    <div class="footer-menu myPageContainerClass">
        <ul class="pager clearfix">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div> 
    <h4>Page menu:</h4>
    <div class="header-menu clearfix">
        <a href="javascript:void(0);" onclick="pagingSlider.switchToPage('.myPageContainerClass', 1);">1</a>
        <a href="javascript:void(0);" onclick="pagingSlider.switchToPage('.myPageContainerClass', 2);">2</a>
        <a href="javascript:void(0);" onclick="pagingSlider.switchToPage('.myPageContainerClass', 3);">3</a>
        <a href="javascript:void(0);" onclick="pagingSlider.switchToPage('.myPageContainerClass', 4);">4</a>
        or 
        <a href="javascript:void(0);" onclick="pagingSlider.setPage('.myPageContainerClass', 3);">directly call Page 3</a>
    </div>                
</div>

<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="lib/quoJs/package/quo.js"></script>
<script type="text/javascript" src="lib/fastclick.js"></script>
<script type="text/javascript" src="pagingSlider.js"></script>
<script type="text/javascript">
    $$('#wrapper').swipeLeft(function(){
        pagingSlider.slidePageFrom('.myPageContainerClass', 'right');
    });
    
    $$('#wrapper').swipeRight(function(){
        pagingSlider.slidePageFrom('.myPageContainerClass', 'left');
    });
</script>

</body>
</html>

Configurations

Disable/Enable loop

<script type="text/javascript">
        pagingSlider.loop = false; //default is true
</script>

Disable/Enable pointer footer menu

<script type="text/javascript">
        pagingSlider.disablePagePointer = true; //default is false
</script>

Tested with

cordova 3.3, 3.4, 3.5, 3.6, 4.0
angularJS
Android 4.1<
iOS 6.0<
Firefox OS 1.3

Changelog

Release 1.0.7 - Changelog

Modified Demo URL.
Reordered readme.md contents.

Release 1.0.6 - Changelog

Added bower support
Added angularJS support

Release 1.0.5 - Changelog

Added live demo

Release 1.0.4 - Changelog

Hotfix: composer support.
README.md modifications.

Release 1.0.3 - Changelog

Hotfix: composer support.

Release 1.0.2 - Changelog

Added composer support.
Added platform support (Windows Phone 8.0 & 8.1, amazon-fireos, tizen)

Release 1.0.1 - Changelog

Added user css class support - linslin#4

Release 1.0 - Changelog

Official stable release
Added cordova 3.6 & 4.0 support (iOS / Android / blackberry / firefoxos / browser)
Changed readme.md images paths.

Known Issues

Old Android Versions - Swipe does not work due quoJS/zepto.js. Fix -> "madrobby/zepto#315"

webcraftniray/pagingSlider