jquery.flipster
Advanced tools
2024 Update: I no longer use jQuery and this library won't be getting any new feature development, but it still works! If it's useful to you that's great! Feel free to submit issues if you encounter major bugs. I'm declaring issue bankruptcy as of January 2024 for a clean slate.
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:
Live demo: http://brokensquare.com/Code/jquery-flipster/demo/
Include the relevant files from /dist/ in your project, or:
npm install jquery.flipster
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'!
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]
});
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
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>
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>
<li data-flip-title="Item 2 Title" data-flip-category="Category 1">...</li>
<li data-flip-title="Item 3 Title" data-flip-category="Category 2">...</li>
<li data-flip-title="Item 4 Title" data-flip-category="Category 2">...</li>
<li data-flip-title="Item 5 Title">...</li>
</ul>
</div>
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.6 - Jan 17 2024
1.1.5 - Oct 17 2020
1.1.3 - Nov 10 2017
1.1.2 - Mar 3 2016
1.1.1 - Mar 3 2016
1.1.0 - Mar 3 2016
stop method added for issues like #751.0.1 - Nov 1 2015
1.0.0 - Oct 23 2015
autoplay option to automatically advance through items; pauseOnHover option will prevent items from switching automatically while hoveredfadeIn option for controlling duration of fade-in animation after Flipster has been setup0.3.4 - July 23 2014
0.3.2 - February 4 2014
jump method and functionality for exposing other methods. (Thanks @JoeWagner!)0.3.1 - July 18 2013
0.3.0 - July 17 2013
itemContainer, itemSelector, style, and start options for basic configurationenableKeyboard, enableMousewheel, and enableTouch options to enable/disable featuresenableNav and enableNavButtons options to insert controls into the containeronItemSwitch callback0.2.1 - July 11 2013
0.2.0 - June 27 2013
0.1.3 - March 25 2013
0.1.0 - March 25 2013
0.0.0 - March 22 2013
The MIT License (MIT)
Copyright (c) 2013-2024 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.
FAQs
Responsive coverflow-style carousel plugin for jQuery
We found that jquery.flipster demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.