勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法

  JavaScript

画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、他サイトを見ていた際に「Flickity」というプラグインでスライダーが設置されていた。調べたところ「Flickity」はバニラJS対応(jQuery非依存)とのこと。また、使ってみた感じ「slick」より良さげ。以下に利用方法をメモ。

 

Flickity

公式サイト

https://flickity.metafizzy.co/

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/flickity@3.0.0/dist/flickity.pkgd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/flickity@3.0.0/css/flickity.min.css" rel="stylesheet">

尚、フルスクリーン機能・ナビ機能を使いたい場合は以下も記述する。

/* フルスクリーン */
<script src="https://cdn.jsdelivr.net/npm/flickity-fullscreen@2.0.0/fullscreen.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/flickity-fullscreen@2.0.0/fullscreen.min.css" rel="stylesheet">

/* ナビ */
<script src="https://cdn.jsdelivr.net/npm/flickity-as-nav-for@3.0.0/as-nav-for.min.js"></script>

それぞれ異なるバージョンを使用したい場合は以下より探す。

flickity本体

https://www.jsdelivr.com/package/npm/flickity

フルスクリーン機能

https://www.jsdelivr.com/package/npm/flickity-fullscreen

ナビ機能

https://www.jsdelivr.com/package/npm/flickity-as-nav-for

 

サンプル

フルスクリーン機能付き

https://taitan916.info/sample/flickity/

ナビ機能付き

https://taitan916.info/sample/flickity/nav/

ナビ機能付き2(ナビ用プラグイン不使用)

https://taitan916.info/sample/flickity/nav2/

 

利用方法

基本的な使い方

<div id="slider">
    <div><img src="./img/001.jpg"></div>
    <div><img src="./img/002.jpg"></div>
    <div><img src="./img/003.jpg"></div>
    <div><img src="./img/004.jpg"></div>
    <div><img src="./img/005.jpg"></div>
</div>

<script>
//バニラJSの場合
const slider = new Flickity('#slider', {
    //各種オプション設定
});

//jQueryの場合
$('#slider').flickity(
    //各種オプション設定
);
</script>

オプション設定については公式リファレンスを参照すること。

フルスクリーン機能を追加したい場合

フルスクリーン用のJS / CSSファイルを読み込んだ上で以下のようにオプション項目を設定する。

const slider = new Flickity('#slider', {
    fullscreen: true, //フルスクリーン機能を有効化
});

尚、フルスクリーンにする場合はCSSの調整が必要っぽい(特に親要素のwidth)。

ナビ機能を追加したい場合

こちらは少々面倒だけどナビ用のスライダーを作る必要がある。詳細は以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法サンプル</title>
<style>
#slider{
    max-width: 800px;
    margin: 0 auto;
}
#slider_nav{
    max-width: 400px;
    margin: 50px auto;
}
#slider_nav .flickity-cell img{
    height: 50px;
    width: 100px;
}
#slider_nav .flickity-button{
    display: none;
}
</style>
</head>
<body>

    <div id="slider">
        <div><img src="../img/001.jpg"></div>
        <div><img src="../img/002.jpg"></div>
        <div><img src="../img/003.jpg"></div>
        <div><img src="../img/004.jpg"></div>
        <div><img src="../img/005.jpg"></div>
    </div>

    <div id="slider_nav">
        <div><img src="../img/001.jpg"></div>
        <div><img src="../img/002.jpg"></div>
        <div><img src="../img/003.jpg"></div>
        <div><img src="../img/004.jpg"></div>
        <div><img src="../img/005.jpg"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/flickity@3.0.0/dist/flickity.pkgd.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/flickity@3.0.0/css/flickity.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/flickity-fullscreen@2.0.0/fullscreen.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/flickity-fullscreen@2.0.0/fullscreen.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/flickity-as-nav-for@3.0.0/as-nav-for.min.js"></script>
    <script>
    const slider = new Flickity('#slider', {
        wrapAround: true,
        fullscreen: true,
    });

    const slider_nav = new Flickity('#slider_nav', {
        wrapAround: true,
        asNavFor: '#slider',
        pageDots: false,
    });
    </script>
</body>
</html>

ナビ用プラグインを使用せずナビ機能を付けたい場合

ナビ用プラグインを使用するとナビ部分のスライダーも動くのが微妙、という場合もありそう。

そのためナビ部分は動かずにサムネイル画像のみ表示し、その画像をクリックするとメインのスライダーを動かしたい、といったような場合は以下のような形になる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法サンプル</title>
<style>
#slider{
    max-width: 800px;
    margin: 0 auto;
}
#slider_nav{
    display: flex;
    margin: 50px 0;
    justify-content: center;
}
#slider_nav img{
    height: 50px;
    width: 100px;
}
</style>
</head>
<body>

    <div id="slider">
        <div><img src="../img/001.jpg"></div>
        <div><img src="../img/002.jpg"></div>
        <div><img src="../img/003.jpg"></div>
        <div><img src="../img/004.jpg"></div>
        <div><img src="../img/005.jpg"></div>
    </div>

    <div id="slider_nav">
        <div onclick="change(0);"><img src="../img/001.jpg"></div>
        <div onclick="change(1);"><img src="../img/002.jpg"></div>
        <div onclick="change(2);"><img src="../img/003.jpg"></div>
        <div onclick="change(3);"><img src="../img/004.jpg"></div>
        <div onclick="change(4);"><img src="../img/005.jpg"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/flickity@3.0.0/dist/flickity.pkgd.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/flickity@3.0.0/css/flickity.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/flickity-fullscreen@2.0.0/fullscreen.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/flickity-fullscreen@2.0.0/fullscreen.min.css" rel="stylesheet">
    <script>
    const slider = new Flickity('#slider', {
        wrapAround: true,
        fullscreen: true,
    });

    function change(num){
        //スライダーを選択
        slider.select( num );
    }
    </script>
</body>
</html>

 - JavaScript

  関連記事

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法

PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...

Lightboxで文字をクリックしたら画像を表示させる方法

Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックす ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...