jQuery – 要素をスクロールし続ける EndlessRiver の使い方

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

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

デモページ

使い方

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

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

<link type="text/css" rel="stylesheet" href="css/endlessRiver.css" />
<!-- bootstrap.min.css はコントローラーを表示する場合のみ読み込む -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=1.11.1"></script>
<script type="text/javascript" src="js/endlessRiver.js"></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 //マウスオーバーした時にスクロールを止めない
    });
});

デモページ