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.
- 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.
- Chrome (latest)
- Safari & iOS Safari (latest)
- Firefox (latest)
- IE 10+ full support
- IE 8-9 limited support
Step 1: Include Flipster's CSS, typically in the
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:
Plain ol' HTML!...
*Tip: Set the
itemSelector options to fit your markup. Flipster only requires an outer container and inner container; you aren't restricted to
</body> tag) and initialize Flipster on your element:
Step 4: Start flippin'!
Configure your options when first initializing Flipster. Default values and descriptions are shown below.
Once an element has been initialized with Flipster, you can call methods to control it:
var myFlipster = ; // It's best to store the element as a variable for easy reference.myFlipster; // Next itemmyFlipster; // Previous itemmyFlipster; // Jump to a specific indexmyFlipster; // Jump to a specific itemmyFlipster; // Resume autoplaymyFlipster; // Set autoplay durationmyFlipster; // Pause the autoplay until next jumpmyFlipster; // Stop the autoplay entirelymyFlipster; // If items are added or removed, you can tell Flipster to reindex
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.
data-flip-category attributes on your items, and the navigation list will group items into categories, allowing for basic filtering and quicker navigation.
If you run into a problem or have an idea, make an issue on Github.
See room for improvement? Don't be shy! Fork this repo and I'll be happy to merge pull requests provided they keep Flipster lightweight, simple, and free of dependencies beyond jQuery. Make sure that you run
grunt to generate minified files for distribution before making a pull request!
1.1.5 - Oct 17 2020
- Fix issue with event handling in latest browsers, thanks to @marcodafonseca and @Peadey
1.1.3 - Nov 10 2017
- Improvements to touch swiping on mobile devices, thanks to @fjmusick
1.1.2 - Mar 3 2016
- Bower & package.json fixes
1.1.1 - Mar 3 2016
- Fix for maximum callstack errors when not visible. #74 #79
1.1.0 - Mar 3 2016
stopmethod added for issues like #75
1.0.1 - Nov 1 2015
- Fixed issue #63 where the active nav class was added to all nav items.
1.0.0 - Oct 23 2015
- Special thanks to @shshaw for major additions leading to version 1.0!
- Massive rewrite for performance optimization and simplification
- Some option names have changed; be sure to check the documentation to update your code
- Better scrollwheel, keyboard and touch events
- BEM syntax for all Flipster classes
autoplayoption to automatically advance through items;
pauseOnHoveroption will prevent items from switching automatically while hovered
fadeInoption for controlling duration of fade-in animation after Flipster has been setup
0.3.4 - July 23 2014
- Some additional options available
- Cleaned up code and normalized whitespace
- Added Grunt support for minifying css and js for distribution
0.3.2 - February 4 2014
- Added public access for
jumpmethod and functionality for exposing other methods. (Thanks @JoeWagner!)
- A number of bug fixes.
- Added public access for
0.3.1 - July 18 2013
- Better demos ( See http://brokensquare.com/Code/jquery-Flipster/demo/ )
0.3.0 - July 17 2013
- @shshaw forked from @drien's jQuery.Flipster
- Added new Carousel style! Shows 5 items at a time in a looping carousel
startoptions for basic configuration
enableTouchoptions to enable/disable features
enableNavButtonsoptions to insert controls into the container
0.2.1 - July 11 2013
- Fixed bug where all keyboard input was being suppressed.
0.2.0 - June 27 2013
- Added automatic height adjustment for the container element, which used to just overflow.
- A few minor code improvements.
- Added minified versions of the js and css files.
0.1.3 - March 25 2013
- Strong men also cry, strong men also cry.
0.1.0 - March 25 2013
- Improvements in fallbacks for old version of IE and basic fixes to make it actually work.
0.0.0 - March 22 2013
- LIFE ON THE BLEEDING EDGE BABY
The MIT License (MIT)
Copyright (c) 2013-2019 Adrien Delessert
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.