WEBTODESIGN

簡単にナビ付きスライダーが実装できるライブラリ「Flickity」の使い方

ナビ付きスライダーをサクッと実装したい、、、

そんな時はオプションも用意されているFlickityが便利です！
もちろんバニラJSで使用できます。

Flickityの導入

まずは、Flickityの公式サイトからCSSとJSをダウンロードするか、CDNで読み込みます。
※CDNの場合は最新バージョンを必ず確認してください！

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

CSSとJSの両方がないと正しく動かないので注意です。自分のCSSとJSより先に読み込んでください。

HTMLを用意する

次に、スライドショーの型を用意します。各スライドを並べ、グループ化します。（今回はリストタグを使用していますが、divなどでも大丈夫です。）

外を囲むグループには何かしらのクラスをつけます。今回は「slideshow」というクラスをつけました。

（公式チュートリアルでは「main-carousel」というクラスがついていますが、JSで指定できるのでなんでも大丈夫です。）

<ul class="slideshow">
    <li><!-- スライドの中身① --></li>
    <li><!-- スライドの中身② --></li>
    <li><!-- スライドの中身③ --></li>
</ul>

それぞれのスライドの中身は、文字でも、画像と文字の組み合わせでもなんでもいけます。

ポイントは、スライドの中身（例えばimgタグなど）をそのまま並べてグループ化しないこと。必ずimgタグ単体だったとしても、何かしらのタグで囲んでから並べてください。

imgタグ単体だと不具合が起きることがありました。

JSで発動する

そして、HTMLが準備できたらJSでスライドショーを発動！

一番簡潔な書き方は以下です。今回はグループに「slideshow」というクラスをつけているので、JSにてそのクラスを指定します。

（他の記述方法は公式サイトをご確認のこと。）

var flkty = new Flickity( '.slideshow', {
    //オプション
});

これでサイトを確認してみると！
あら！サクッとスライドショーになりました。

オプションでカスタマイズする

さて、先程の記述でスライドショーを発動しただけだと、全て初期値のベーシックなスライドショーになります。JSでオプションを指定して、好みの仕様に変えることができます。

例えば、スライドを無限ループにするにはwrapAroundを有効に、ページドットを非表示にする場合はpageDotsを無効にします。

オプションは以下のように、{}の中にコンマで区切って羅列していきます。

var flkty = new Flickity( '.slideshow', {
    wrapAround: true,
    pageDots: false
});

次に、私がよく使用するオプションをいくつかご紹介します。

※全てのオプションは公式サイトのオプション一覧ページで確認できます。

よく使うオプション

次へボタンを押して最後のスライドを超えると、次に最初のスライドがきてループするようになります。

wrapAround: true

スライドを操作しなくても自動で再生するようにします。

autoPlay: true

速さを指定したい場合は、trueの代わりに数字を指定します。

autoPlay: 1500

次へ・前へボタンを非表示にします。

prevNextButtons: false

ページドットを非表示にします。

pageDots: false

セルの整列位置を変えます。

cellAlign: 'left'

デフォルトはcenterです。left・center・rightを設定できます。

ドラッグでスライドを流せるのを無効にします。

draggable: false

他にもさまざまなオプションが用意されています。
※公式サイトのオプション一覧ページ

CSSで見た目をカスタマイズする

スライドショーの見た目は、CSSで自在にカスタマイズできます。

スライドのサイズを変えるのはもちろん、次へ・前へボタンやページドットも自由な見た目にできます。

各スライドのサイズと間隔

各スライドそれぞれに充てたクラスに横幅や高さを指定すればOKです。間隔は各スライドにmargin-rightで指定します。

今回だと以下のような感じ。

.slideshow li{
    width: 80%;
    margin-right: 10px;
}

次へ・前へボタン

デフォルトの次へ・前へボタンは、半透明の白いサークルの上に矢印のSVGが乗っているような見た目です。

半透明のサークルを消す

背景を透明すれば半透明のサークルは消えます。違う色にしたり、違うサイズにしたり、四角にしたい場合はborder-radius: 0を指定するなど、ベースの形を変えたい場合はflickity-buttonクラスに色々指定すれば自在に変形できます。

.flickity-button {
    background: transparent;
}

矢印を変える

SVGの矢印の形を変えることができるJSのオプションが用意されていますが、扱いにくいので、私はSVGを非表示にして::beforeで別の画像などを充てる方法にしています。

例えば、以下のような感じです。

.flickity-button svg{
    display: none;
}
.flickity-button::before{
    content: '';
    display: block;
    〜
}
.flickity-button.previous::before{
    〜
}
.flickity-button.next::before{
    〜
}

クリックした時に出る青枠を消す

アクセシビリティの向上のために、クリックすると青枠が出るようになっている場合があります。
そのような場合は、以下をCSSに追加すると消せます。

.flickity-button:focus{
    box-shadow: none;
}

.flickity-buttonはFlickityで自動生成されるクラス名なので、このまま追加すればOKです。

ページドット

ページドットは全体がflickity-page-dotsクラス、個別がdotクラス、選択されているドットはis-selectedクラスがついています。

.flickity-page-dots{
    /* 全体の場所や幅を指定 */
}
.flickity-page-dots .dot{
    /* ドットそれぞれの見た目を指定 */
}
.flickity-page-dots .dot.is-selected{
    /* 選択されているドットの見た目を指定 */
}

詳細は公式サイトのスタイル紹介ページへ。

おわりに

Flickityでは他にもさまざまなオプションが用意されており、フレキシブルにさまざまなスライドショーが作れます。わからないことがあれば、公式サイトをチェックです！

Flickityを使えばサクッとスライドショーが作れる、かつオプションが豊富なので重宝してます😚

ライセンスについて

ライセンスは公式サイトのライセンスページをご確認ください。

オープンソースライセンスで、通常のWeb制作などに使用するには無料で使用できます。（2022年8月2日時点）商用アプリに使ったり、Flickityを使用した独自の商用製品を開発するには商用ライセンスの購入が必要なようです。

詳細は必ずライセンスページを確認してください。

RECOMMENDATION

NEWEST