要素を横スクロールでループさせるjQueryプラグインEndlessRiver

EndlessRiverは、画像やテキストをループし続けるてくれるjQueryプラグインです。
シンプルな設定で動くので、アレンジ次第で色々な見せ方が出来そうです。

EndlessRiver配布元（MITライセンス)

サンプル

使い方

必要なファイルを読み込む

EndlessRiver配布元からプラグインのファイルをダウンロードして、jQuery、bootstrapライブラリと一緒に読み込みます。

<link rel="stylesheet" type="text/css" href="../css/endless-river.css" />
<!-- bootstrap.min.css はコントローラーを表示する場合のみ読み込む -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="../js/endless-river.js" type="text/javascript"></script>

2行目のbootstrap.min.cssは、スクロールのコントローラー用のWebフォントを読み込むためのファイルです。
オプションでコントローラーを使用しない場合は、読み込まなくてOKです。

html

スクロールしたい要素をリストタグでマークアップし、固有のidを付与します。
この場合はid=”photo”です。

<ul id="photo">
    <li><img src="../images/main-bnr/01-600x300.jpg" alt=""></li>
    <li><img src="../images/main-bnr/02-600x300.jpg" alt=""></li>
    <li><img src="../images/main-bnr/03-600x300.jpg" alt=""></li>
    <li><img src="../images/main-bnr/04-600x300.jpg" alt=""></li>
    <li><img src="../images/main-bnr/05-600x300.jpg" alt=""></li>
</ul>

jQuery

デフォルトで使う

$(document).ready(function(){
    $("#photo").endlessRiver();
});

オプションを指定して使う

$(document).ready(function(){
    $("#text").endlessRiver({
        speed: 50,//スクロールのスピード
        buttons: true,//コントロールボタンを表示
        pause: false //マウスオーバーした時にスクロールを止めない
    });
});