View on GitHub

Jquery.Flipster

Responsive, CSS3, touch-enabled jQuery Coverflow plugin.

Download this project as a .zip file Download this project as a tar.gz file

Demos

Overview

Originally forked from jQuery.Flipster by @drien

jQuery Flipster is a CSS3 3D transform-based jQuery plugin that replicates the familiar 'cover flow' effect and now features a 'carousel' effect! It's responsive, so it will automatically center itself and scale down to fit the area provided. It likes to be playfully touched on mobile browsers. It degrades (vaguely) gracefully, falling back to being just as flat and boring as the browsers that don't support 3D transforms. Its only dependency is jQuery and it sets up in seconds. It's pretty rad.

At this point you're probably saying 'ZOMG JQUERY FLIPSTER WHERE HAVE U BEEN ALL MY LIFE???'. I would be if I were you. So your project needs some sweet, sweet coverflow loving. You've come to the right place.

The slider can be operated with arrow keys, clicks, side to side scrolling or by touch on mobile devices. Wrapping the image elements in anchor tags also works to enable linking out from the current element.

Live demo: http://brokensquare.com/Code/jquery-flipster/demo/

Tested in:

Latest Version Untested in:

Basic Usage

Include the CSS (ideally in the header)

<link rel="stylesheet" href="css/flipster.css">

Set up your image list like so:

<div class="flipster">
    <ul>
        <li><img src="" alt="" /></li>
        ...
    </ul>
</div>

Include the Javascript after jQuery (ideally at the bottom of the page before the </body> tag

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="/js/jquery.flipster.js"></script>

Initialize the script:

$(function(){ $('.flipster').flipster(); });

Options

Callbacks

Advanced Usage

Parameters

If you want to change options, add the parameters when initializing the script. Default values are shown below

$(function(){ 
    $('.flipster').flipster({
        itemContainer:          'ul', // Container for the flippin' items.
        itemSelector:               'li', // Selector for children of itemContainer to flip
        style:                          'coverflow', // Switch between 'coverflow' or 'carousel' display styles
        start:                          'center', // Starting item. Set to 0 to start at the first, 'center' to start in the middle or the index of the item you want to start with.

        enableKeyboard:         true, // Enable left/right arrow navigation
        enableMousewheel:       true, // Enable scrollwheel navigation (up = left, down = right)
        enableTouch:                true, // Enable swipe navigation for touch devices

        enableNav:                  false, // If true, flipster will insert an unordered list of the slides
        enableNavButtons:       false, // If true, flipster will insert Previous / Next buttons

        onItemSwitch:               function(){}, // Callback function when items are switches
    }
});

Navigation

Flipster can build an unordered list of links to the slides, which can come in handy for some implementations. Include the id and title attribute on each item and set enableNav: true in the Javascript parameters.

An item list like:

<div class="flipster">
    <ul class="flip-items">
        <li id="Item-1" title="Item 1 Title">
            <img src="" alt="" />
        </li>
        <li id="Item-2" title="Item 2 Title">
            <img src="" />
        </li>
        ...
  </ul>
</div>

will output:

<ul class="flipster-nav">
<li class="flip-nav-item no-category"><a href="#Item-1" class="flip-nav-item-link">Item 1 Title</a></li>
<li class="flip-nav-item no-category"><a href="#Item-2" class="flip-nav-item-link">Item 2 Title</a></li>...
</ul>

in the container.

Categories

The navigation list can also group items into categories. Include the data-flip-category along with the id and title attributes with enableNav: true in the Javascript parameters.

An item list like:

<div class="flipster">
    <ul class="flip-items">
        <li id="Item-1" title="Item 1 Title" data-flip-category="Category 1">
            <img src="" alt="" />
        </li>
        <li id="Item-2" title="Item 2 Title" data-flip-category="Category 1">
            <img src="" />
        </li>
        <li id="Item-3" title="Item 3 Title" data-flip-category="Category 2">
            <img src="" />
        </li>
        <li id="Item-4" title="Item 4 Title" data-flip-category="Category 2">
            <img src="" />
        </li>
        <li id="Item-5" title="Item 5 Title">
            <img src="" />
        </li>
  </ul>
</div>

will output:

<ul class="flipster-nav">
    <li class="flip-nav-category">
        <a href="#" class="flip-nav-category-link" data-flip-category="Category 1">Category 1</a>
        <ul class="flip-nav-items">
            <li class="flip-nav-item"><a href="#Item-1" class="flip-nav-item-link">Item 1</a></li>
            <li class="flip-nav-item"><a href="#Item-2" class="flip-nav-item-link">Item 2</a></li>
        </ul>
    </li>
    <li class="flip-nav-category">
        <a href="#" class="flip-nav-category-link" data-flip-category="Category 2">Category 2</a>
        <ul class="flip-nav-items">
            <li class="flip-nav-item"><a href="#Item-3" class="flip-nav-item-link">Item 3</a></li>
            <li class="flip-nav-item"><a href="#Item-4" class="flip-nav-item-link">Item 4</a></li>
        </ul>
    </li>
    <li class="flip-nav-item no-category">
        <a href="#Item-5" class="flip-nav-item-link">Item 5 Title</a>
    </li>
</ul>

in the container.

To Do

Contributing

If you can make this better, don't be shy! I'll be happy to merge pull requests as long as they keep the project lightweight, simple to set up and free of dependencies beyond jQuery.

Also, if you run into a problem or have an idea, feel free to make an issue on the github project and I'll get on it when I can!

Version History

License

© 2013 Adrien Delessert

Licensed for use under the WTFPL. http://www.wtfpl.net/