{"id":28748121,"url":"https://github.com/drien/jquery-flipster","last_synced_at":"2025-06-16T18:02:05.702Z","repository":{"id":7588677,"uuid":"8944720","full_name":"drien/jquery-flipster","owner":"drien","description":"Responsive, CSS3, touch-enabled jQuery Coverflow plugin.","archived":false,"fork":false,"pushed_at":"2024-06-21T17:23:15.000Z","size":625,"stargazers_count":719,"open_issues_count":1,"forks_count":285,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-06-16T10:22:53.086Z","etag":null,"topics":["coverflow","jquery","jquery-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/jquery.flipster","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drien.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-03-22T04:13:14.000Z","updated_at":"2025-05-29T00:03:39.000Z","dependencies_parsed_at":"2024-06-18T16:56:24.347Z","dependency_job_id":"14f0ee92-5281-4dc7-8f93-a411969a9ccf","html_url":"https://github.com/drien/jquery-flipster","commit_stats":{"total_commits":172,"total_committers":20,"mean_commits":8.6,"dds":0.6569767441860466,"last_synced_commit":"6b43708b13cb03171c30e9c0815466002d1c4705"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/drien/jquery-flipster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drien%2Fjquery-flipster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drien%2Fjquery-flipster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drien%2Fjquery-flipster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drien%2Fjquery-flipster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drien","download_url":"https://codeload.github.com/drien/jquery-flipster/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drien%2Fjquery-flipster/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260212060,"owners_count":22975479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["coverflow","jquery","jquery-plugin"],"created_at":"2025-06-16T18:01:18.522Z","updated_at":"2025-06-16T18:02:05.696Z","avatar_url":"https://github.com/drien.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"jQuery.Flipster\n===============\n\n**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.**\n\nFlipster 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:\n\n- **Responsive**: From desktop to mobile, Flipster automatically centers and scales to fit the area provided.\n- **Lightweight**: Javascript and CSS combined are only 5kb gzipped (13kb uncompressed). Only dependency is jQuery.\n- **Touch/Scrollwheel/Trackpad/Keyboard Friendly** Swipe on touch devices, scroll via trackpad or mousewheel, and use your arrow keys to fly through items!\n- **Flexible:** Flip an image gallery or any HTML content. Links and dynamic content work great!\n- **Customizable:** Four built in styles (coverflow, carousel, wheel and flat) with plenty of options to configure Flipster the way you want.\n\nLive demo: http://brokensquare.com/Code/jquery-flipster/demo/\n\n## Browser Support\n- [x] Chrome (latest)\n- [x] Safari \u0026 iOS Safari (latest)\n- [x] Firefox (latest)\n- [x] IE 10+ full support\n- [x] IE 8-9 limited support\n\nInstallation\n---------------\n\nInclude the relevant files from /dist/ in your project, or:\n\n`npm install jquery.flipster`\n\n\nBasic Usage\n---------------\n\n**Step 1**: Include Flipster's CSS, typically in the `\u003chead\u003e`:\n```html\n\u003clink rel=\"stylesheet\" href=\"css/flipster.min.css\"\u003e\n```\n*Tip: Use the un-minified `flipster.css` or the LESS files in the `src/less` folder to make your own Flipster styles!*\n\n**Step 2**: Set up your content:\n```html\n\u003cdiv class=\"my-flipster\"\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003cimg src=\"\" /\u003e\u003c/li\u003e\n    \u003cli\u003e\u003cp\u003ePlain ol' \u003cabbr\u003eHTML\u003c/abbr\u003e!\u003c/p\u003e\u003c/li\u003e\n    ...\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n*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 `\u003cdiv\u003e`, `\u003cul\u003e`, and `\u003cli\u003e`s. *\n\n**Step 3**: Include Flipster's Javascript after jQuery (ideally at the bottom of the page before the `\u003c/body\u003e` tag) and initialize Flipster on your element:\n```html\n\u003cscript src=\"/js/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/js/jquery.flipster.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    $('.my-flipster').flipster();\n\u003c/script\u003e\n```\n\n**Step 4**: Start flippin'!\n\n\nOptions\n---------------\n\nConfigure your options when first initializing Flipster. Default values and descriptions are shown below.\n```javascript  \n$('.my-flipster').flipster({\n    itemContainer: 'ul',\n    // [string|object]\n    // Selector for the container of the flippin' items.\n\n    itemSelector: 'li',\n    // [string|object]\n    // Selector for children of `itemContainer` to flip\n\n    start: 'center',\n    // ['center'|number]\n    // Zero based index of the starting item, or use 'center' to start in the middle\n\n    fadeIn: 400,\n    // [milliseconds]\n    // Speed of the fade in animation after items have been setup\n\n    loop: false,\n    // [true|false]\n    // Loop around when the start or end is reached\n\n    autoplay: false,\n    // [false|milliseconds]\n    // If a positive number, Flipster will automatically advance to next item after that number of milliseconds\n\n    pauseOnHover: true,\n    // [true|false]\n    // If true, autoplay advancement will pause when Flipster is hovered\n\n    style: 'coverflow',\n    // [coverflow|carousel|flat|...]\n    // Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles\n    // Create your own theme in CSS and use this setting to have Flipster add the custom class\n\n    spacing: -0.6,\n    // [number]\n    // Space between items relative to each item's width. 0 for no spacing, negative values to overlap\n\n    click: true,\n    // [true|false]\n    // Clicking an item switches to that item\n\n    keyboard: true,\n    // [true|false]\n    // Enable left/right arrow navigation\n\n    scrollwheel: true,\n    // [true|false]\n    // Enable mousewheel/trackpad navigation; up/left = previous, down/right = next\n\n    touch: true,\n    // [true|false]\n    // Enable swipe navigation for touch devices\n\n    nav: false,\n    // [true|false|'before'|'after']\n    // If not false, Flipster will build an unordered list of the items\n    // Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items\n\n    buttons: false,\n    // [true|false|'custom']\n    // If true, Flipster will insert Previous / Next buttons with SVG arrows\n    // If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`\n\n    buttonPrev: 'Previous',\n    // [text|html]\n    // Changes the text for the Previous button\n\n    buttonNext: 'Next',\n    // [text|html]\n    // Changes the text for the Next button\n\n    onItemSwitch: false\n    // [function]\n    // Callback function when items are switched\n    // Arguments received: [currentItem, previousItem]\n});\n```\n\nMethods\n---------------\n\nOnce an element has been initialized with Flipster, you can call methods to control it:\n\n```javascript\nvar myFlipster = $('.my-flipster').flipster(); // It's best to store the element as a variable for easy reference.\n\nmyFlipster.flipster('next'); // Next item\nmyFlipster.flipster('prev'); // Previous item\nmyFlipster.flipster('jump', 0); // Jump to a specific index\nmyFlipster.flipster('jump', $('.my-item')); // Jump to a specific item\nmyFlipster.flipster('play'); // Resume autoplay\nmyFlipster.flipster('play', 5000); // Set autoplay duration\nmyFlipster.flipster('pause'); // Pause the autoplay until next jump\nmyFlipster.flipster('stop'); // Stop the autoplay entirely\nmyFlipster.flipster('index'); // If items are added or removed, you can tell Flipster to reindex\n```\n\nNavigation\n---------------\n\nSet `nav: true` in the options and Flipster can build an unordered list of links to each item to let users jump around.\n\nThe 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.\n\n```html\n\u003cdiv class=\"my-flipster\"\u003e\n    \u003cul\u003e\n        \u003cli data-flip-title=\"Item 1 Title\"\u003e...\u003c/li\u003e\n        \u003cli data-flip-title=\"Item 2 Title\"\u003e...\u003c/li\u003e\n        ...\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n\n## Categories\n\nInclude `data-flip-category` attributes on your items, and the navigation list will group items into categories, allowing for basic filtering and quicker navigation.\n\n```html\n\u003cdiv class=\"my-flipster\"\u003e\n    \u003cul\u003e\n        \u003cli data-flip-title=\"Item 1 Title\" data-flip-category=\"Category 1\"\u003e...\u003c/li\u003e\n        \u003cli data-flip-title=\"Item 2 Title\" data-flip-category=\"Category 1\"\u003e...\u003c/li\u003e\n        \u003cli data-flip-title=\"Item 3 Title\" data-flip-category=\"Category 2\"\u003e...\u003c/li\u003e\n        \u003cli data-flip-title=\"Item 4 Title\" data-flip-category=\"Category 2\"\u003e...\u003c/li\u003e\n        \u003cli data-flip-title=\"Item 5 Title\"\u003e...\u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n\nContributing\n---------------\nIf you run into a problem or have an idea, [make an issue](https://github.com/drien/jquery-flipster/issues) on Github.\n\nSee 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`](http://gruntjs.com) to generate minified files for distribution before making a pull request!\n\n\nVersion History\n---------------\n\n- 1.1.6 - Jan 17 2024\n    - Update npm dependencies and rebuild dist files\n\n- 1.1.5 - Oct 17 2020\n    - Fix issue with event handling in latest browsers, thanks to @marcodafonseca and @Peadey\n\n- 1.1.3 - Nov 10 2017\n    - Improvements to touch swiping on mobile devices, thanks to @fjmusick\n\n- 1.1.2 - Mar 3 2016\n    - Bower \u0026 package.json fixes\n\n- 1.1.1 - Mar 3 2016\n    - Fix for maximum callstack errors when not visible. #74 #79\n\n- 1.1.0 - Mar 3 2016\n    - `stop` method added for issues like #75\n\n- 1.0.1 - Nov 1 2015\n    - Fixed issue #63 where the active nav class was added to all nav items.\n\n- 1.0.0 - Oct 23 2015\n    - Special thanks to [@shshaw](http://twitter.com/shshaw)\u003c/a\u003e for major additions leading to version 1.0!\n    - Massive rewrite for performance optimization and simplification\n    - *Some option names have changed*; be sure to check the documentation to update your code\n    - Better scrollwheel, keyboard and touch events\n    - [BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) for all Flipster classes\n    - Added `autoplay` option to automatically advance through items; `pauseOnHover` option will prevent items from switching automatically while hovered\n    - Added `fadeIn` option for controlling duration of fade-in animation after Flipster has been setup\n\n- 0.3.4 - July 23 2014\n    - Some additional options available\n    - Cleaned up code and normalized whitespace\n    - Added Grunt support for minifying css and js for distribution\n\n- 0.3.2 - February 4 2014\n    - Added public access for `jump` method and functionality for exposing other methods. (Thanks @JoeWagner!)\n    - A number of bug fixes.\n\n- 0.3.1 - July 18 2013\n    - Better demos ( See http://brokensquare.com/Code/jquery-Flipster/demo/ )\n\n- 0.3.0 - July 17 2013\n    - @shshaw forked from @drien's [jQuery.Flipster](https://github.com/drien/jquery-Flipster)\n    - Added new Carousel style! Shows 5 items at a time in a looping carousel\n    - Added `itemContainer`, `itemSelector`, `style`, and `start` options for basic configuration\n    - Added `enableKeyboard`, `enableMousewheel`, and `enableTouch` options to enable/disable features\n    - Added `enableNav` and `enableNavButtons` options to insert controls into the container\n    - Added `onItemSwitch` callback\n\n- 0.2.1 - July 11 2013\n    - Fixed bug where all keyboard input was being suppressed.\n\n- 0.2.0 - June 27 2013\n    - Added automatic height adjustment for the container element, which used to just overflow.\n    - A few minor code improvements.\n    - Added minified versions of the js and css files.\n\n- 0.1.3 - March 25 2013\n    - Strong men also cry, strong men also cry.\n\n- 0.1.0 - March 25 2013\n    - Improvements in fallbacks for old version of IE and basic fixes to make it actually work.\n\n- 0.0.0 - March 22 2013\n    - LIFE ON THE BLEEDING EDGE BABY\n\n\nLicense\n---------------\n\nThe MIT License (MIT)\n\nCopyright (c) 2013-2024 Adrien Delessert\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrien%2Fjquery-flipster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrien%2Fjquery-flipster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrien%2Fjquery-flipster/lists"}