【jQuery】bxSliderでPagerを複数表示したい

JavaScript

bxSliderでPagerを上下に2つ表示させる必要があったので
その方法をご紹介します。

デモを見る

bxSliderのオプションでpagerCustomを指定しておきます。
ここでは下記のようにしました。
pagerCustom: '.bx-pager'

JSでbx-pagerの中身を作ってappendしてみたら、うまくいきました。

■JS

$(function(){
 var $sliderArea = $('.slider-area');
  var $pageLength = $sliderArea.find('.sld-page').length;
   var li = "";

    //pagerの要素を作る
   if ($pageLength > 1) {
       $sliderArea.find('.pager-custom').css('display','block');
     for (var k = 0; k < $pageLength; k++) {
          var pageNo = k+1;
           li += '<li><a data-slide-index="' + k +'" href="">' + pageNo + '</a></li>';
       }
       $sliderArea.find('.bx-pager').append($('<ul />').append(li));
 }

   //bxSliderの設定
   $('#slider').bxSlider({
       speed:1000,
     responsive: true,
       pager: true,
        adaptiveHeight: true,
       touchEnabled: false,
        infiniteLoop:false,
     hideControlOnEnd:true,
      controls: false,
        pagerCustom: '.bx-pager'
  });
});

■HTML

<div class="slider-area">

<div class="pager-custom">
<div class="bx-pager"></div>
</div>

<div id="slider">
<div class="sld-page">
<p><img src="images/1.gif" alt="" width="400" height="200"></p>
</div><!-- /sld-page -->

<div class="sld-page">
<p><img src="images/2.gif" alt="" width="400" height="200"></p>
</div><!-- /sld-page -->

<div class="sld-page">
<p><img src="images/3.gif" alt="" width="400" height="200"></p>
</div><!-- /sld-page -->
</div><!-- /slider -->

<div class="pager-custom">
<div class="bx-pager"></div>
</div>

</div><!-- /slider-area -->

■参考サイト

bxSlider
bxSlider / Thumbnail pager - method 1