勉強したことのメモ

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

  関連記事

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

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

PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法

ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

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

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

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

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