Creating a Mobile Touch Slide Panel with JQuery

http://www.zackgrossbart.com/hackito/touchslider/

https://github.com/zgrossbart/jstouchslide

This bar is boring on a computer, but it comes alive on a mobile device. Grab your iPad or Android device and take a look.

Drag your finger and the items move with you. They follow your speed and keep your momentum. Play with it a little. I’ll wait.

The sliding touch panel only shows up on mobile platforms. With a mouse it feels clunky, but sliding with your finger just feels right.

This article shows you how to implement a sliding touch panel in JavaScript. jQuery is the only dependency of the touch slider. The rest is pure JavaScript and HTML. It runs fast, feels natural, and works on every mobile device with touch support.

Horizontal Slide View

This is a JavaScript implementation of a mobile style Horizontal Slide View.

Use your finger to drag it left and right to all of the items in the view.

Since this is JavaScript it works on every mobile device with touch support

and

it does a good job with pictures

Each cell of the slider is HTML so you can put anything you want in it

The slider works just like the native application sliders

It snaps each cell into place and supports momentum

Try dragging fast and watch the items fly by

Want to know how it works?

keep reading

↓

[javascript] loopedSlider (0)	2011.06.24
[App] Episode - 아이패드용 매거진 Pleiades Corp. (0)	2011.05.19
[javascript] iScroll-js (0)	2011.05.10
[jQuery] jquery - carousel (0)	2011.05.10
[javascript] carouslide - A highly adaptable jQuery plugin for creating carousels and slideshows (0)	2011.05.10

[javascript] loopedSlider (0)

2011.06.24

[App] Episode - 아이패드용 매거진 Pleiades Corp. (0)

2011.05.19

[javascript] iScroll-js (0)

2011.05.10

[jQuery] jquery - carousel (0)

2011.05.10

[javascript] carouslide - A highly adaptable jQuery plugin for creating carousels and slideshows (0)

2011.05.10