スライダープラグイン「Flickity」の紹介
Contents
スライダープラグイン「Flickity」の紹介
写真をスライダー形式で表示させるプラグイン「Flickity」を紹介したいと思います。
インストール方法
CDN
<!-- flickity JSファイル -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<!-- flickity CSSファイル -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">JSファイルとCSSファイルを読み込めば完了です。
「Flickity」のサイトからソースをダウンロードして利用することも可能ですが、CDNのほうが手っ取り早い思いますね。
料金
商用ライセンス
商用サイトで利用する場合には、ライセンスの購入が必要のようです。
| Developer | デベロッパーランセンスで、開発者ごとに価格料金です。 | ２５ 米 ドル |
| Team | チームライセンスで、８開発者までに利用できるライセンスです。 | １１０ 米 ドル |
| Organization | 組織ライセンスで、開発者の人数は無制限のライセンスです。 | ３２０米ドル |
サンプル／デモ
サンプル
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flickity example</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- flickity JSファイル -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<!-- flickity CSSファイル -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- フルスクリーン用のJSファイル -->
<script src="https://unpkg.com/flickity-fullscreen@1/fullscreen.js"></script>
<!-- フルスクリーン用のCSSファイル -->
<link rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@1/fullscreen.css">
<!-- フェード用のJSファイル -->
<script src="https://unpkg.com/flickity-fade@1/flickity-fade.js"></script>
<!-- フェード用のCSSファイル -->
<link rel="stylesheet" href="https://unpkg.com/flickity-fade@1/flickity-fade.css">
<script type="text/javascript">
function initializeFlickity() {
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
cellAlign: 'left'
,contain: true
,groupCells: 2
,fade: true
});
/* jQueryの場合*/
$('#main-carousel').flickity();
}
window.onload = initializeFlickity;
</script>
<style style="text/css">
.main-carousel {
width:1000px;
}
.carousel-cell img {
height:300px;
}
.carousel-cell.is-selected {
background: #ED2;
}
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
/* フルスクリーン時の写真は100%にする */
.is-fullscreen img {
height:100%;
}
</style>
</head>
<body>
<div class="main-carousel">
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06478.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC08220.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC04912.jpg" /></div>
</div>
<div class="main-carousel" id="main-carousel" data-flickity='{ "cellAlign": "right", "contain": true, "autoPlay":1000, "fullscreen": true }'>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06478.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06740.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC08220.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC02046.jpg" /></div>
<div class="carousel-cell"><img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC04912.jpg" /></div>
</div>
</body>
</html>デモ
コーディング方法
HTML
<div class="main-carousel">
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
...
</div>DIVのクラス「main-carousel」の下部に「carousel-cell」クラスのDIVを定義することで、カルーセルの各項目を定義することができます。
初期化
jQueryを利用しない場合
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
cellAlign: 'left'
,contain: true
,groupCells: 2
,fade: true
});Flickity クラスをnewして、最初のパラメータに「main-carousel」クラスのDIVオブジェクトを渡して、第２パラメータにオプションを渡します。
jQueryを利用する場合
/* jQueryの場合*/
$('#main-carousel').flickity();jQueryの場合、selectorで 「main-carousel」クラスのDIVオブジェクトに対して、コンストラクタを実行してください。パラメータにオプションを指定することもできます。
オプションの指定
オプションは初期化時に渡す方法とDIVオブジェクトの属性（attribute）に設定する方法があります。
属性（attribute）に設定する方法
<div class="main-carousel" id="main-carousel" data-flickity='{ "cellAlign": "right", "contain": true, "autoPlay":1000, "fullscreen": true }'>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
</div>「main-carousel」の『data-flickity』という属性を設定し、そこにオプションを指定してください。
オプション
オプション紹介
オプションたくさんありすぎるので、いくつか紹介します。
| draggable | trueにするとドラッグやフリックで、スライドを移動させることができるようになります。 |
| freeScroll | trueにすると、中途半端な位置でもスライドを止めることができるようになります。 |
| wrapAround | trueにすると、最後のスライドからさらにを移動させると、最初のスライドに戻ることができるようになります。 |
| groupCells | groupCellに数値を指定すると、指定した数値分をカレントになります。これはCSSのクラス「carousel-cell.is-selected」で背景色などを定義しておけば、分かりやすくなると思います。 |
| autoPlay | trueにすると３秒ごとにスライドが移動します。 数値を指定すると指定ミリ秒間隔でスライドが移動します。 |
| pauseAutoPlayOnHover | autoPlayがtrueでも、スライドにオーバーさせると、自動スライドが止ります。 |
| fullscreen | trueにすると、フルスクリーンコントロールが表示され、それをクリックすると、スライダーが全画面表示されます。 ＜必須＞ 以下のライブラリをロードする必要があります。 https://unpkg.com/flickity-fullscreen@1/fullscreen.js https://unpkg.com/flickity-fullscreen@1/fullscreen.css ＜全画面表示時のCSSクラス＞ .carousel.is-fullscreen .carousel-cell { height: 100%; } CSSクラスでheight:100%としておくと、全画面表示時、写真を大きく表示させることができます。 |
| fade | trueにするとしスライドの変更が、スライダーではなく、ジンワリ切り替わるようになります。 ＜必須＞ 以下のライブラリをロードする必要があります。 https://unpkg.com/flickity-fade@1/flickity-fade.js https://unpkg.com/flickity-fade@1/flickity-fade.css |
オプションのほかにもイベントやAPIも実装されていますが、今回は普通にスライドショーだけを実装する方法を紹介しました。
ご参考
関連ページ
- Bootstrapでカルーセル（Carousel）を作る方法
- jQueryプラグイン「Owl Carousel 2」を使ってカルーセル／スライダーを設定する方法
- Fancybox v4でカルーセル（Carousel）を作る方法
- スライダープラグイン「slick」の紹介
