cubiq/cardview

Javascript incarnation of the rolodex

cardview

This is a little control to browse through a collection of items like they were cards in a deck or in rolling file device (rolodex). Mostly useful on mobile, but desktop compatibility has been added for ease of debugging.

To reduce memory footprint only 3 cards are loaded at any given time but you can browse an infinite number of items. Also the collection is loopable.

The code is still a bit messy and betaish but maybe you can make good use of it.

You can watch a screencast here http://youtu.be/zWYNUFuKI5s or play with the following demos:

Vertical

Horizontal

Zoom

cardview's Issues

Change sensivity?

How can i change the sensivity? I want to mean, how can i set the min swipe distance to start the transform?

Incorrect roation effect

When in Rotation or Slide effect, sometimes, the next card moves in from Right instead of from Top. This behaviour is very random and I don't seem to find any probable cause.
Any pointers would be appreciated!

Thanks.

How to reverse direction?

That is, right now, when i swipe from right to left the page displayed is the previous one (current - 1) so, how can i reverse this behavior? How can i display the next one (current + 1)?

Duplicate calculating page and card used to update content

The this.page and this.currCard which are used in _updateContent has been updated in _transitionEnd, so they should be used directly.

Additional Effect

I really want to implement this in my project, but i want to have the flipping card effect using touch..
Something Like this:

http://davidwalsh.name/demo/css-flip.php

But instead of clicking before it flips, its better to used touch.. something like turnjs but its just front and back side only..

Do you think its possible?

Horizontal swapping does not work as expected

I have tried to use this control with horizontal swapping mode, but it seems to be having a few issues

Infinite dataset

I want to implement a infinite data set using ajax, do you have any tip or advice about where to start? I'm a bit lost. My idea is initially load -1, 0 and 1 index, so when user switch, for example from 0 to 1, i need to destroy -1 and using ajax, load the item index 2. Or in reverse way, if initially user moves from 0 to -1 i need to destroy 2 and using ajax load -2. I suppose that you get the idea...