如何實現bxslider縮略圖尋呼機下一個上一頁按鈕

Question

我正在使用bxslider，並且嘗試使Thumbnail pager下一個上一個按鈕移動縮略圖，但是我無法實現，您能否幫助我解決這一問題，因此我可以實現帶有下一個上一個縮略圖的縮略圖滑塊。

<ul class="bxslider">
  <li><img src="images/1.jpg" alt="1" width="960" height="600" /></li>
  <li><img src="images/1aNicollet.jpg" alt="1" width="960" height="600" /></li>
  <li><img src="images/7.jpg" alt="1" width="960" height="600" /></li>
  <li><img src="images/100_2129.JPG" alt="1" /></li>
  <li><img src="images/408619_10151175168202229_1189668486_n.jpg" alt="1" width="960" height="600" /></li>
  <li><img src="images/134593849-jpg_215416.jpg" alt="1" width="960" height="600" /></li>
  <li><img src="images/beauty-dress-girl-photo-wallpaper-1920x1200.jpg" alt="1" width="960" height="600" /></li>
  <li><img src="images/meh.ro8908.jpg" alt="1" width="960" height="600" /></li>
  <li><img src="images/lilian-garcia-2011-05-02.jpg" alt="1" width="960" height="600" /></li>
</ul>

<div id="bx-pager">
     <a href="#" id="slider-prev">Previous</a>
     <a data-slide-index="0" href=""><img src="images/thumb/1.jpg" alt="1" /></a>
     <a data-slide-index="1" href=""><img src="images/thumb/1aNicollet.jpg" alt="1" /></a>
     <a data-slide-index="2" href=""><img src="images/thumb/7.jpg" alt="1" /></a>
     <a data-slide-index="3" href=""><img src="images/thumb/100_2129.JPG" alt="1" /></a>
     <a data-slide-index="4" href=""><img src="images/thumb/408619_10151175168202229_1189668486_n.jpg" alt="1" /></a>
     <a data-slide-index="5" href=""><img src="images/thumb/134593849-jpg_215416.jpg" alt="1" /></a>
     <a data-slide-index="5" href=""><img src="images/thumb/beauty-dress-girl-photo-wallpaper-1920x1200.jpg" alt="1" /></a>
     <a href="#" id="slider-next">Next</a>
</div>

Answer 1

假設您正在滑塊下尋找第二個上一個/下一個動作。

如下調用滑塊：

var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager'
});

$('a.pager-prev').click(function () {
var current = slider.getCurrentSlide();
slider.goToPrevSlide(current) -1;
});
$('a.pager-next').click(function () {
var current = slider.getCurrentSlide();
slider.goToNextSlide(current) +1;
});

jsFiddle： http : //jsfiddle.net/defonic/2cc7F/