勉強したことのメモ

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

  関連記事

Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法

あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...

javascriptやjQueryで画像を書き換えても変わらない場合

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

JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法

外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...

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

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

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

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