自動ループで流れ続けるスライダーを「Slick」で実装 × SnowMonkey

こんにちは、minoyanです。

今回、タイトルのように、写真が右から左へ流れ続けるスライダーを実装したいと思い、調べて作ることができたので記録しておきます。

↓こんな感じのものを作ります。

参考にさせていただいたサイトは下記2つです。ありがとうございます。

手順1:「Slick」をダウンロード&アップ

まずは「Slick」の公式ページよりプラグインをダウンロードします。
ダウンロード方法は参考サイトのSlickで横方向に流れ続ける無限ループスライダーを作る方法のなかでも紹介されています。

ダウンロードしたslick1.8.1/slickのフォルダをFTPをつかってmy-snow-monkey/assets/slickとなるようにアップロードします。(「assets」は作成する必要があります。)

my-snow-monkey

assets

slick(←ダウンロードしたフォルダ)

手順2:myslick.jsの作成

slickスライダーの実装したいjQueryを書きます。myslick.jsを作って下記のコードを入れます。

jQuery('.slider').slick({
    autoplay: true, //自動でスクロール
    autoplaySpeed: 0, //自動再生のスライド切り替えまでの時間を設定
    speed: 5000, //スライドが流れる速度を設定
    cssEase: "linear", //スライドの流れ方を等速に設定
    slidesToShow: 2, //表示するスライドの数
    swipe: false, // 操作による切り替えはさせない
    arrows: false, //矢印非表示
    pauseOnFocus: false, //スライダーをフォーカスした時にスライドを停止させるか
    pauseOnHover: false, //スライダーにマウスホバーした時にスライドを停止させるか
    responsive: [
      {
        breakpoint: 750,
        settings: {
          slidesToShow: 2, //画面幅750px以下でスライド2枚表示
        }
      }
    ]
  });

今回はコピペOK! Snow Monkeyで自動再生の動画スライダーを作るに習わせていただき、myslick.jsにしました。

できたmyslick.jsを下記の階層にアップロードします。
my-snow-monkey/assets/slick/myslick.js

my-snow-monkey

assets

slick

myslick.js

手順3:my-snow-monkey.phpへ記述

my-snow-monkeyへ下記のコードを記述し、アップロードします。

add_action(
    'wp_enqueue_scripts',
    function () {
        wp_enqueue_style( //slick.cssの読み込み
            'slickcss',
            MY_SNOW_MONKEY_URL . '/assets/slick/slick.css',
            [Framework\Helper::get_main_style_handle()],
            filemtime(plugin_dir_path(__FILE__))
        );
         wp_enqueue_style( //slick-theme.cssの読み込み
             'slick-theme',
             MY_SNOW_MONKEY_URL . '/assets/slick/slick-theme.css',
             [Framework\Helper::get_main_style_handle()],
            filemtime(plugin_dir_path(__FILE__))
         );
        wp_enqueue_script( //slick.min.jsの読み込み
            'slick',
            MY_SNOW_MONKEY_URL . '/assets/slick/slick.min.js',
            ['jquery'],//jqueryの後に読み込むことを明示
            false,//ver管理の
            false//falseでheader前に読み込む必要あり
        );
        wp_enqueue_script( //myslick.jsの読み込み
            'myslick',
            MY_SNOW_MONKEY_URL . '/assets/slick/myslick.js',
            [],
            false,
            true//trueでfooter付近で読み込む
        );
    }
);

手順4:HTMLコードを入れる

表示させたい箇所に「カスタムHTML」ブロックを使うなどして、下記のコードを入れます。

<div class="slider">
  <div><img src="画像1"></div>
  <div><img src="画像2"></div>
  <div><img src="画像3"></div>
  <div><img src="画像4"></div>
  <div><img src="画像5"></div>
</div>

画像1〜5にはメディアにアップロードした画像のURLを入れます。

完成!

以上で自動ループのスライダーができると思います!

スピードなどの調整はmyslick.jsでできます。
Slickで横方向に流れ続ける無限ループスライダーを作る方法を参考にするといいと思います。

また、表示するスライドの数を使用している写真の枚数と同じか多かったりするとうまく動かないので注意が必要です。(私はここでつまづきました…)

追記:Slickは重いので入れる際は注意を

12/8の「Snow Monkey ショーケースに掲載されているサイトの作られ方を覗いて見よう」でSlickについて気になっていたことがあったので質問させていただきました。

キタジマさんからいただいた回答として、「Slickは重いので一箇所など小規模で使うようだったらおすすめしない」とのことでした。
ただ流れ続けるだけであればCSSでも実装できるのでそちらの方が軽くていいそうです。

確かにファイルたくさん必要ですよね…

Slick使用の際はご注意くださいませ♪

まとめ

初めて外部jsを利用して実装してみました〜
とても勉強になりました!

この記事を書いた人