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

Grab it on github or check out the online demo.

This is something I wanted to add to the SwipeView but while working on it I realized that they were two pretty different concepts and code bases.

The purpose of the widget is to let you browse through a potentially limitless collection of items, a bit like a rolodex. It’s basically a carousel, but each new item is a “card” that slides over the previous one.

Here urges an explanatory video.

Nothing particularly mind blowing but the good part is that it uses just three elements to handle an infinite list of items.

The control is of course targeted to mobile devices –or small screens anyway– and memory footprint was my main concern. There are only three DOM elements at any given time and at each card flip an event is fired to populate new content into the array.

CardView is a class that you can initiate like so:

var deck = new CardView('#wrapper', {
   effect: 'rotate',
   direction: 'v',
   dataset: data,
   onUpdateContent: function (el, data) {
      // Code to update the card content

The first option is the “deck” wrapper, the DOM element that contains the three cards.

The second option is an object you use to configure the control.

effect is the visual effect used to flip the cards. It can be 'rotate' (default), 'slide', 'zoom'.

direction is the direction of the swipe the control reacts to. It can be 'vertical' (default) or 'horizontal' (you can abbreviate it to 'v' and 'h').

dataset is an array which contains all your cards data. Keep reading for some examples.

onUpdateContent is the function that get called when new content needs to be loaded from the dataset array. I’m giving you an example to show how it works.

The simplest dataset you can have might be as follow:

var data = ['image', 'some_other_image', 'another_one', ...];

Your wrapper would look like this:

<div id="wrapper">
    <ul id="deck">
        <li class="card"><div></div></li>
        <li class="card"><div></div></li>
        <li class="card"><div></div></li>

All that the onUpdateContent function has to do is to set the background image of the div inside the li.class element. So the function will look like this:

function (el, data) {
    el.querySelector('div').style.backgroundImage = 'url(' + data + '.jpg)';

The function passes two parameters: el is the DOM element that needs to be updated; data is the array element, or the actual data that you need to place into the new card.

Of course you can have a dataset of objects, so you can change not only the background image but also a title or a description or whatever. Please have a look at the demos for more complex configurations.

Admittedly the code is still a bit messy and it would need a clean up; also this widget screams for ajax support that I will eventually add if there will be any interest around this control. I hope you could make some use of this initial release nonetheless. Use it freely, it is released under the MIT license.

If you find this script useful and you wish to see more updates, please consider supporting the development!


8 thoughts on “CardView”

  1. When mydeck.gotopage(n) is called the order of right or left scroll is not right after more than 3 shifts. I mean the third page is not the right page in sequence

  2. Hi
    I want to use cardview as a tab or page. i want put .net component to cardview. not show image or text only. How can I do it?

  3. It’s not clear from these examples how to define the data for cards using HTML, not image paths. Does this currently only support background images?

  4. One more thing: I notice that on large screens, it’s very hard to actually swipe cards. I think the reason is that it sets the swipe threshold to a proportional value of the container width. For users, it’s usually more intuitive to signal a swipe based on a minimum movement, or by velocity. (A quick flick indicates the intention to flip cards.)

Leave a Reply

Your email address will not be published. Required fields are marked *