Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You might wanna take a look at <a href="https://github.com/bradbirdsall/Swipe" rel="nofollow noreferrer">Swipe</a>, especially since this will also be for iOS, because it detects the swipes and <a href="http://swipejs.com/" rel="nofollow noreferrer">the demo</a> shows support for slides.</p> <p>There was some other good solutions presented here, on Stack Overflow, on this question: <a href="https://stackoverflow.com/questions/4403004/sliding-an-entire-web-page">Sliding An Entire Web Page</a> You might want to take a look at the answers there, the accepted one does the sliding for entire pages</p> <p>[edit]Depending on your skills, you could try to make your own vanilla (pure) javascript functions for the sliding. That's what I ended up doing, using the html5's translate3d css property.</p> <p>For example, here's the function I use to generate the css codes:</p> <pre><code>//generates transformation styles for Opera, Chrome, Firefox and IE function genTransform (x, y, z, dur) { var genStyle = '-webkit-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -webkit-transition: ' + dur + 'ms;' + '-moz-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -moz-transition: ' + dur + 'ms;' + '-ms-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -ms-transition: ' + dur + 'ms;' + '-o-transform: translate(' + x + 'px, ' + y + 'px); -o-transition: ' + dur + 'ms;' + 'transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); transition: ' + dur + 'ms;'; return genStyle; } </code></pre> <p>I then apply the style to my divs to get them to slide according to my needs. It's actually very simple if you only slide between a set number of pages</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload