jQuery
【jQuery】カバーフローエフェクトを再現するためのプラグインFlipster
September 28, 2018

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