スライダーロール画像実装 | SIRIUSシリウスjQuery

トップページ＞ Java scriptとの組合せ＞スライダーロール画像

～お知らせ～
要望にお応えしLUREA購入特典もSIRIUSと同じ特典にしました！
購入特典にオリジナルテンプレートを追加しました！

カルーセルスライダー画像

前後左右の画像を表示しつつスライドするカルーセルスライダーの
実装方法のご紹介です。

jQueryのFilmRollを使用した方法で、
ビジネステンプレートのヘッダー画像にて動作確認しています。

まずは、こちらのデモページをご覧ください。
デモページにいく

よく企業のホームページなんかで見たことのある
ヘッダー画像ですよね。
このようなスライド画像もシリウスの中に実装できます。

では手順に参ります！

手順１

下のボタンより必要なファイルをダウンロードします。
（ファイル名：film_roll.zip　容量：3KB）

本家サイトはこちら⇒FilmRoll
最新版ファイルURL⇒https://github.com/straydogstudio/film_roll/tree/master/js

手順２

フォルダを解凍し、中身に入っている
jquery.film_roll.jsをそのまま、あなたのサーバーのどこかにアップロードします。
（フォルダ内のjquery.film_roll.min.jsは一応残していますが、今回は使いません。）

手順３

編集メニューからHTMLテンプレートをクリックします。
HTMLテンプレート選択

手順４

トップページの＜/head＞の上に下記青文字部分をコピペします。

次にそのまま下のほうへ移り、
＜div id="headerbox"＞と＜div id="container"＞の間に
下記の青字をコピペします。※画像名は変えてください。
※<div id="header"> </div></div>は削除します。

<div id="headerbox">
<div id="film_roll_slider">
<div><img src="<% pageDepth %>img/header1.jpg" alt="" /></div>
<div><img src="<% pageDepth %>img/header2.jpg" alt="" /></div>
<div><img src="<% pageDepth %>img/header3.jpg" alt="" /></div>
<div><img src="<% pageDepth %>img/header4.jpg" alt="" /></div>
<div><img src="<% pageDepth %>img/header5.jpg" alt="" /></div>
</div>
<div id="container">

さらにそのまま下のほうへ移り、
＜/body＞の上に下記青字をコピペします。

<script type="text/javascript">
$(function() {
  fr = new FilmRoll({
    container: '#film_roll_slider',
    pager: true, // Pagerを使用する場合にはtrue
    animation: 1500, //切替時間
    interval: 5000, //画像静止時間
    height: 210 //ページ切替ボタン位置
  });
});
</script>

</body>

保存してHTMLを閉じます。

手順５

編集メニューからスタイルシートをクリックします。
スタイルシートを選択