勉強したことのメモ

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やjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...

バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法

あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

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

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

画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法

amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...