Baconswipe is a lightweight, 2D scrollable grid slider for webkit touch devices. It's also delicious.
-
Create a div with id 'slider'
-
Inside the div create a ul; each list item is a "cell". Put your cell content inside the li tags.
-
To ensure some content is displayed even on non-compatible browsers, set the inline style display property to none for all but the first li, which should be inline-block.
-
Include baconswipe.js
-
Call: new BaconSwipe(document.getElementById('slider'), OPTIONS, height, width, columns) where options is an array of settings (see baconswipe.js), height and width are the TOTAL heights and widths of the li cells, including margins, padding, borders, etc, and columns is the number of columns in each row.
-
In CSS, set the dimensions of #slider
-
Baconswipe will automatically determine how many cells will be VISIBLE in a row/column at once, and calculate + add applicable margins.