jQuery.Flipster
jQuery.Flipster
Flipster is a CSS3 3D transform-based jQuery plugin built to replicate the familiar 'cover flow' effect, but also supports a variety of styles. Not only is it gorgeous to look at, Flipster is also:
- Responsive: From desktop to mobile, Flipster automatically centers and scales to fit the area provided.
- Lightweight: Javascript and CSS combined are only 5kb gzipped (13kb uncompressed). Only dependency is jQuery.
- Touch/Scrollwheel/Trackpad/Keyboard Friendly Swipe on touch devices, scroll via trackpad or mousewheel, and use your arrow keys to fly through items!
- Flexible: Flip an image gallery or any HTML content. Links and dynamic content work great!
- Customizable: Four built in styles (coverflow, carousel, wheel and flat) with plenty of options to configure Flipster the way you want.
Live demo: http://brokensquare.com/Code/jquery-flipster/demo/
Browser Support
- Chrome (latest)
- Safari & iOS Safari (latest)
- Firefox (latest)
- IE 10+ full support
- IE 8-9 limited support
Basic Usage
Step 1: Include Flipster's CSS, typically in the <head>
:
<link rel="stylesheet" href="css/flipster.min.css">
Tip: Use the un-minified flipster.css
or the LESS files in the src/less
folder to make your own Flipster styles!
Step 2: Set up your content:
<div class="my-flipster">
<ul>
<li><img src="" /></li>
<li><p>Plain ol' <abbr>HTML</abbr>!</p></li>
...
</ul>
</div>
*Tip: Set the itemContainer
and itemSelector
options to fit your markup. Flipster only requires an outer container and inner container; you aren't restricted to <div>
, <ul>
, and <li>
s. *
Step 3: Include Flipster's Javascript after jQuery (ideally at the bottom of the page before the </body>
tag) and initialize Flipster on your element:
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.flipster.min.js"></script>
<script>
$('.my-flipster').flipster();
</script>
Step 4: Start flippin'!
Options
Configure your options when first initializing Flipster. Default values and descriptions are shown below.
$('.my-flipster').flipster({
itemContainer: 'ul',
// [string|object]
// Selector for the container of the flippin' items.
itemSelector: 'li',
// [string|object]
// Selector for children of `itemContainer` to flip
start: 'center',
// ['center'|number]
// Zero based index of the starting item, or use 'center' to start in the middle
fadeIn: 400,
// [milliseconds]
// Speed of the fade in animation after items have been setup
loop: false,
// [true|false]
// Loop around when the start or end is reached
autoplay: false,
// [false|milliseconds]
// If a positive number, Flipster will automatically advance to next item after that number of milliseconds
pauseOnHover: true,
// [true|false]
// If true, autoplay advancement will pause when Flipster is hovered
style: 'coverflow',
// [coverflow|carousel|flat|...]
// Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles
// Create your own theme in CSS and use this setting to have Flipster add the custom class
spacing: -0.6,
// [number]
// Space between items relative to each item's width. 0 for no spacing, negative values to overlap
click: true,
// [true|false]
// Clicking an item switches to that item
keyboard: true,
// [true|false]
// Enable left/right arrow navigation
scrollwheel: true,
// [true|false]
// Enable mousewheel/trackpad navigation; up/left = previous, down/right = next
touch: true,
// [true|false]
// Enable swipe navigation for touch devices
nav: false,
// [true|false|'before'|'after']
// If not false, Flipster will build an unordered list of the items
// Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items
buttons: false,
// [true|false|'custom']
// If true, Flipster will insert Previous / Next buttons with SVG arrows
// If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`
buttonPrev: 'Previous',
// [text|html]
// Changes the text for the Previous button
buttonNext: 'Next',
// [text|html]
// Changes the text for the Next button
onItemSwitch: false
// [function]
// Callback function when items are switched
// Arguments received: [currentItem, previousItem]
});
Methods
Once an element has been initialized with Flipster, you can call methods to control it:
var myFlipster = $('.my-flipster').flipster(); // It's best to store the element as a variable for easy reference.
myFlipster.flipster('next'); // Next item
myFlipster.flipster('prev'); // Previous item
myFlipster.flipster('jump', 0); // Jump to a specific index
myFlipster.flipster('jump', $('.my-item')); // Jump to a specific item
myFlipster.flipster('play'); // Resume autoplay
myFlipster.flipster('play', 5000); // Set autoplay duration
myFlipster.flipster('pause'); // Pause the autoplay until next jump
myFlipster.flipster('stop'); // Stop the autoplay entirely
myFlipster.flipster('index'); // If items are added or removed, you can tell Flipster to reindex
Navigation
Set nav: true
in the options and Flipster can build an unordered list of links to each item to let users jump around.
The navigation list will use each item's data-flip-title
attribute as the text. If an item does not have a data-flip-title
, Flipster will try to grab the title
attribute, or will default to the item's index.
<div class="my-flipster">
<ul>
<li data-flip-title="Item 1 Title">...</li>
<li data-flip-title="Item 2 Title">...</li>
...
</ul>
</div>
Categories
Include data-flip-category
attributes on your items, and the navigation list will group items into categories, allowing for basic filtering and quicker navigation.
<div class="my-flipster">
<ul>
<li data-flip-title="Item 1 Title" data-flip-category="Category 1">...</li>
<
HTML, CSS, JAVASCRIPT, JQUERY