マルチデバイスに対応したflickityでスライドを作成してみた

こんにちは！
まだまだ寒い日が続きますがようやく春らしい天気が顔を出すようになってきましたね！

今回はflickityを使用してスライドを作成してみましたがとても使いやすかったので
ご紹介します！

flickityはＰＣはもちろんスマホやタブレットでもフリック操作が可能です。
簡単に実装できてバグもなく、おすすめできます。

では早速！

flickityの使い方

以下のサイトからflickityをダウンロードしてください。

【URL】flickityのGitHub

ダウンロードしたソースからcssとjsを自分のローカルフォルダに入れてhead内に書き込みます。


<head>
	<!-- CSS -->
	<link rel="stylesheet" href="指定した階層/flickity.css"/>
	<!-- JavaScript -->
	<script src="指定した階層/flickity.pkgd.js"></script>
</head>

でbody内には以下のようにソースを書きます。

<div id="flickity-wrap">
<div><img src="photo1.jpg"/><br/>画像1</div>
<div><img src="photo2.jpg"/><br/>画像2</div>
<div><img src="photo3.jpg"/><br/>画像3</div>
…
</div>

あとはjavascriptを書いてあげれば動きます！
ちなみにスライドさせたいコンテンツの大枠に必ずid名またはclass名をつけましょう！


var flickitySyncer = [];
var elms = document.getElementsByIdName( "flickity-wrap" ) ;//指定したidまたはclass名

for( var i=0,l=elms.length; l>i; i++ )
{　flickitySyncer[i] = new Flickity( elms[i] , {contain: true} ) ;}

はい！これで完了です♪
オプションもあるのでいろいろ試してみてください。

以下公式サイトです。
【URL】公式サイト

Share: