シリウスでスライダーを使うbxslider

bxslider設置サンプル

シリウスにbxsliderを設置したサンプルです。

 

 

今回必要となるjqueryは以下のサイトから入手してください。
 ⇒http://bxslider.com/

 

ダウンロードしたファイルの中から以下の3つをサーバーの任意の場所に入れてください。

  • jquery.bxslider.min.js
  • jquery.bxslider.css
  • imagesフォルダ

 

次にシリウスのHTMLテンプレートを開き、以下のコードをHTMLテンプレートの</head>の上辺りに設置してください。
例えばトップページにスライダーを表示したいときはトップページのテンプレートにコードを設置してください。
この場合エントリーページやカテゴリーページにスライダーは表示されません。

 

「あなたのサーバーのURL」には上記でファイルを入れたディレクトリを指定してください。

<!-- jQuery library (served from Google) -->
<script src="http://あなたのサーバーのURL/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://あなたのサーバーのURL/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="http://あなたのサーバーのURL/jquery.bxslider.css" rel="stylesheet" />
</head>

 

次に以下のコードを</body>の上辺りに設置してください。

<!-- slider plugin -->
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
auto:true,
speed:1000,
mode: 'fade',
pager:false,
controls:false
});
});
</script>
<!-- slider plugin ここまで -->

 

スライダーを設置したい箇所に以下のコードを設置してください。

<!-- slider plugin -->
<div id="slider">
<div><img src="http://あなたのURL/img/画像ファイル名1.jpg"></div>
<div><img src="http://あなたのURL/img/画像ファイル名2.jpg"></div>
<div><img src="http://あなたのURL/img/画像ファイル名3.jpg"></div>
<div><img src="http://あなたのURL/img/画像ファイル名4.jpg"></div>
<div><img src="http://あなたのURL/img/画像ファイル名5.jpg"></div>
</div>
<!-- slider plugin end -->

 

これでスライダーがサイトに表示されるようになります。