Jan 12, 2015

bxSliderを利用してスライダーを設置

毎年恒例の西宮戎神社へ行ってきました。

福笹も購入して、しっかりと商売繁盛をお願いしてきました。

さてさて、先日お客様よりTOPページにスライダーを設置したいとご依頼がありました。

方法は色々ありますが、一番簡単だと思われるjqueryプラグインのbxSliderを設置しました。

設置方法はシンプルでとても簡単です。

bxSliderのサイトからファイルをダウンロードします。

②ダウンロードしたファイルの中のCSSファイルとjsファイルをサーバーにアップします。

③サイトのhead部分に下記を追記します。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/css/jquery.bxslider.css" rel="stylesheet" />

jsとCSSファイルをアップした場所は正確に書いて下さい。

次に、jqueryを呼び出すscriptを追記。

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    auto: true//自動切り替えの有無
    });
});
</script>

これで準備はOKです。あとはオプションでスライドさせたりしてください。

あとは、HTMLを設置したい場所に書きます。class名はデフォルトで”bxslider”です。

<ul class="bxslider"> 
<li><img src="sample1.jpg" width="" height="" alt="サンプル1" /></li> 
<li><img src="sample2.jpg" width="" height="" alt="サンプル2" /></li> 
<li><img src="sample3.jpg" width="" height="" alt="サンプル3" /></li> 
</ul> 

以上で設置完了です。

とっても簡単に設置できるのがいいですね(^^♪

LINEで送る

関連記事