2017 © Pedro Peláez
 

web-page-transition 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 control several pages, retrieve individual pages and slide from one side to another.

image

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 control several pages, retrieve individual pages and slide from one side to another.

  • Sunday, March 15, 2015
  • by linslin
  • Repository
  • 3 Watchers
  • 28 Stars
  • 6 Installations
  • JavaScript
  • 0 Dependents
  • 0 Suggesters
  • 16 Forks
  • 5 Open issues
  • 8 Versions
  • 0 % Grown

The README.md

# 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., (*1)

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;"., (*2)

Demo

http://www.linslin.org/2015/01/13/css-hardware-accelerated-page-transitions/, (*3)

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, (*4)

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>



pagingSlider example







    

        

            

               
Page 1

            

        

        

            

               
Page 2

            

        

        

            

               
Page 3

            

        

        

            

               
Page 4

            

        

    

    

        
    
            
  • 
            
  • 
            
  • 
            
  • 
        

    
 
    
Page menu:

    

        1
        2
        3
        4
        or 
        directly call Page 3
    
                















</body>
</html>

Configurations

Disable/Enable loop

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

<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 - https://github.com/linslin/pagingSlider/issues/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 -> "https://github.com/madrobby/zepto/issues/315"

Thanks to Christophe Coenraets

The Versions

15/03 2015

dev-master

9999999-dev

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.

  Sources   Download

MIT

by Nils Gajsek

cordova phonegap page transition pagingslider

15/03 2015

dev-development

dev-development

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.

  Sources   Download

MIT

by Nils Gajsek

cordova phonegap page transition pagingslider

15/03 2015

1.0.7

1.0.7.0

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.

  Sources   Download

MIT

by Nils Gajsek

cordova phonegap page transition pagingslider

04/12 2014

1.0.6

1.0.6.0

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.

  Sources   Download

MIT

by Nils Gajsek

cordova phonegap page transition pagingslider

14/11 2014

1.0.5

1.0.5.0

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.

  Sources   Download

MIT

by Nils Gajsek

cordova phonegap page transition pagingslider

14/11 2014

1.0.4

1.0.4.0

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.

  Sources   Download

MIT

by Nils Gajsek

cordova phonegap page transition pagingslider

14/11 2014

1.0.3

1.0.3.0

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.

  Sources   Download

MIT

by Nils Gajsek

cordova phonegap page transition pagingslider

14/11 2014

1.0.2

1.0.2.0

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.

  Sources   Download

MIT

by Nils Gajsek

cordova phonegap page transition pagingslider