Horizontal and vertical navigation between screens or slides

[marcfalk]

I’m building a news application, and I have a few requirements for the way users browse news categories and stories.

I want users to be able to swipe left and right to browse news stories, but up and down to change news category.

I experimented with multiple slide boxes, but is limited (and forced to modify the module) when loading content conditionally - I only want images/videos to be loaded, when they are visible on screen. Hence, I’m looking for something a bit more custom, I guess. The news stories will always fit within the screen (and thus no scrolling is required on the content), as the full story will be displayed in a modal if one decides to dig deeper (a modal that supports standard scrolling).

Any ideas on where to start, or how you would approach this?

(The illustration below seeks to illustrate my navigational need)

[marcfalk]

Currently trying out a hack: Basically I have a “surface”-div on top of every category. With this, I monitor what gestures/events are being performed via on-*, and it allows me to fire the appropriate functions upon events initiated by the user. For example, every time I get a swipe left, I tell the slide box (in the given category) to go to the next slide.

For vertical transitions, I might not be able to slide, but at least fade in/out. I’ll post something when I got something working

[Oleks]

Would you mind sharing the code you used for the work-around? Thanks!