File Size: 659KB
Total Views: 718
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
Flipster is a smooth flexible and touch friendly coverflow plugin that built with CSS3 and jQuery. It uses CSS3 transition and transform for a smooth transition and 3D based look. Flipster is responsive enabled and it automatically centres and scales on mobile devices. Supports on all the latest mobile devices and browsers, it also supports a variety of predefined styles like coverflow, carousel, wheel, flat etc.
Features:
- Very flexible and easy to use.
- Supports on all modern browsers and mobile devices.
- Responsive enabled, automatically adjust on mobile devices, no extra effort is needed.
- Lightweight and easy to customize.
- Various predefined styles to choose.
- Touch, scroll wheel, trackpad and keyboard friendly.
How to use it:
1. Include the Javascript jquery.flipster.min.js at the bottom of the web page.
<script src="path/to/jquery.flipster.min.js"></script>2. Include the CSS jquery.flipster.min.css in the header of the page.
<link rel="stylesheet" href="path/to/jquery.flipster.min.css">3. Add the basic HTML to the page.
<div id="coverflow">
<ul class="flip-items">
<li><img src="path/to/images/text1.jpg"></li>
<li><img src="path/to/images/text2.jpg"></li>
</ul>
</div>4. Initialize the plugin and we’re ready to go.
var coverflow = $("#coverflow").flipster();Plugin’s default options:
| Name | Default | Type | Description |
|---|---|---|---|
| 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
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
<div class="my-flipster">
<ul>
<li data-flip-title="Item 1 Title">...</li>
<li data-flip-title="Item 2 Title">...</li>
...
</ul>
</div>Categories
<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>
