How to make swipe view with Tabs in JavaScript

Question

like android

Answer 1

^_^

Answer 2

If you plan it for a web site, you should provide a navigation fallback for non-touch display ( swipe is a finger movement concept, you need at least emulate it with the mouse events, or have another way to allow user to navigate in yours tabs ^^ )...

Anyway, to do it, you need two mainly knowlegde range:
- events handling, in particular gesture and mouse events
- html/css tab-like designing, with containers able to be positioned and animated

My advice is to start with a minimal content design, and implement firstly a simple 'switch' tabs view ( display/hyde on tab change ). Then, elaborate/improve your design... and only finally try to upgrade towards a 'swipe view' ;)

Answer 3

Sure: I'll go compil and rewriting courses for all that stuff into two or three line of text :P
I guive you directions, guidelines, try to catch a side and hold tight trying to implement it... Along your progression, ask for more specific problems, and we try to help you to resolve them ^^

Answer 4

A simple example for the first step ( show/hide groups of elements on click/tap, without swipe gesture control ):
https://code.sololearn.com/Wu90AADbb3l0/#html

Answer 5

And to study touch events ( starting point for a gesture handler ):
https://code.sololearn.com/WO8wrPV40Fzn/#js

References:
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Else, to avoid managing yourself a gesture handler, you can try a specialized library as 'hammer.js':
http://hammerjs.github.io/recognizer-swipe/

A 'plugin' for JQuery also exist, but seems limited to binding the basic touch events, without providing gesture events...

Answer 6

ok can you tell me

Answer 7

thank you @visph

Answer 8

thank you @visph