jQuery Flipsterは、カバーフローエフェクトを再現するために構築されたCSS3 3DトランスフォームベースのjQueryプラグイン。レスポンシブ、軽量、タッチデバイス対応、カスタマイズ可能。

1. Chrome (latest)
2. Safari & iOS Safari (latest)
3. Firefox (latest)
4. IE 10+ full support
5. IE 8-9 limited support

headにFlipsterのCSSをインクルード。

<link rel="stylesheet" href="css/flipster.min.css">

コンテンツを設定。

 
<div class="my-flipster">
  <ul>
    <li><img src="" /></li>
    <li><p>Plain ol' <abbr>HTML</abbr>!</p></li>
    ...
  </ul>
</div>

/bodyの前にjQueryとFlipsterのJavascriptを挿入

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.flipster.min.js"></script>
<script>
    $('.my-flipster').flipster();
</script>

オプションを設定

$('.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]
});

メソッドを呼び出す

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 

<div class="my-flipster">
    <ul>
        <li data-flip-title="Item 1 Title">...</li>
        <li data-flip-title="Item 2 Title">...</li>
        ...
    </ul>
</div>

<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>

MIT

• Tag
• jQuery
• Responsive
• Slider