読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【jQuery】bxslider サムネイル付きページャーの挿入

今回はbxsliderのページャーをサムネイルにする。

手順

jquery.bxslider.min.jsとplugin/jquery.easing.1.3.jsとjquery.bxslider.cssをサーバーにあげる
②headタグ内にjavascript記述とcssコード呼び出し
③htmlうつ

jquery.bxslider.min.jsとplugin/jquery.easing.1.3.jsとjquery.bxslider.cssをサーバーにあげる

3つサーバーにあげる。イージングはpluginsフォルダの中に入れたままあげた

②headタグ内にjavascript記述とcssコード呼び出し

下記の順でjavascriptを記述した。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.bxslider.min.js"></script>


<script type="text/javascript">
  
$(function(){
  // assign the slider to a variable
  var slider = $('#slider2').bxSlider({
        auto: true,
        pause:  5000,
        speed: 1000,
        mode: 'fade',
        prevText: '<',
        nextText: '>',
        pager: true,
        easing: 'easeOutBounce', //イージングの効果
         //サムネイルの設定
        buildPager: function(slideIndex){
      switch (slideIndex){
        case 0:
          return '<a data-slide-index="0" href=""><img src="<!--{$TPL_DIR}-->make_data/shop/tulsi_bnr.png" width="200" style="margin:-5px 0;"/></a><br>';
        case 1:
          return '<a data-slide-index="1" href=""><img src="<!--{$TPL_DIR}-->make_data/shop/dokudami1.png" width="200" style="margin:-5px 0;"/></a><br>';
        case 2:
          return '<a data-slide-index="2" href=""><img src="<!--{$TPL_DIR}-->make_data/shop/yomogi_index.jpg" width="200" style="margin:-5px 0;"/></a><br>';
        case 3:
          return '<a data-slide-index="3" href=""><img src="<!--{$TPL_DIR}-->make_data/makomo/makomo.png" width="200" style="margin:-5px 0;"/></a>';
      }
    }
        });
 
 
});
</script>

「#slider2」の中をスライドさせるよう記述。
a data-slide-indexは1行上のcaseの番号に合わせる。でないと、サムネイルページャーが機能しない。


あと下記コードにてcssを呼び出す

<link href="<!--{$TPL_DIR}-->make_data/css/jquery.bxslider.css" rel="stylesheet" type="text/css" />

③スライダーボックスを出したい部分に下記記述。

<ul id="slider2" style="text-align: -webkit-center;">
  <li><img src="<!--{$TPL_DIR}-->make_data/shop/tulsi_bnr.png" width="860" height="310"/></li>
  <li><img src="<!--{$TPL_DIR}-->make_data/shop/dokudami1.png" width="860" height="310" /></li>
  <li><img src="<!--{$TPL_DIR}-->make_data/shop/yomogi_index.jpg" width="860" height="310" /></li>
  <li><img src="<!--{$TPL_DIR}-->make_data/makomo/makomo.png" width="860" height="310" /></li>
</ul>


以上。

【参考URL】
http://560days.com/lab/2013/02/001244.php
http://blog.alan-trigger.info/?p=116