jQueryのスライダー表示プラグインEndlessRiver

画像などがベルトコンベアのようにスルスルと流れていく表現をしたいとき、今まではカルーセルプラグインの『Slick』を使っていて、これはすごくいいプラグインで重宝もしているんですが、ウィンドウのリサイズ時にちょっと挙動がおかしくなる事があるんですね。

まぁリサイズ時なんで、そこまで気にしなくてもいいといえばいいんですが、そういうのが気になるときや、クライアントが気にされる場合に代替として使えるプラグイン『EndlessRiver』の紹介です。

EndlessRiverとは

機能はいたってシンプル、実装するとベルトコンベアのように流れるコンテンツが簡単に作れます。

↑こんなやつ
余分な機能は一切なし。
オプションも3つしかありません。

使い方

まずは必要なファイルをダウンロードします。
githubにデータがあるので、[clone or download]から[Download ZIP]でダウンロードします。
↓からダウンロード

GitHub - tonysamperi/endless-river: A jQuery content endless scroller!

A jQuery content endless scroller! Contribute to tonysamperi/endless-river development by creating an account on GitHub.

github.com

解答したファイル群からcssファイル（css/endless-river.css）とjsファイル（js/endless-river.js）をサーバーにアップ。

jQueryも必要なので、一緒に読み込んでおいてください。

<link type="text/css" rel="stylesheet" href="css/endlessRiver.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/endlessRiver.js"></script>

HTML

<ul class="slide">
   <li><img src="img/hogehoge01.jpg" alt=""></li>
   <li><img src="img/hogehoge02.jpg" alt=""></li>
   <li><img src="img/hogehoge03.jpg" alt=""></li>
   <li><img src="img/hogehoge04.jpg" alt=""></li>
   <li><img src="img/hogehoge05.jpg" alt=""></li>
</ul>

スライドさせたい要素をul、liで囲みます。
ulタグに任意のクラス名 or ID名をつけます。
ここでは仮に”slide”とします。

Javascript(jQuery)

(function($){jQuery.event.add(window, "load", function(){
   $(".slide").endlessRiver();
})})(jQuery);

HTML部分で指定したクラス or ID名に対して「.endlessRiver();」をくっつけます。（ここではslide）これだけ。
スクロールのスピードなどはオプションで設定できるので、下記を参照してください。

オプション

(function($){jQuery.event.add(window, "load", function(){
   $(".slide").endlessRiver({
      speed:100,
      pause:true,
      buttons:false
   });
})})(jQuery);