linslin/paging-slider

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 contro

Installs: 17

Dependents: 0

Suggesters: 0

Security: 0

Stars: 25

Watchers: 4

Forks: 12

Open Issues: 5

Language:JavaScript

Type:web-page-transition

1.0.7 2015-03-15 09:02 UTC

This package is auto-updated.

Last update: 2024-12-12 04:09:22 UTC


README

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

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

ScreenShot

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 - #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"

Thanks to Christophe Coenraets