如何实现 bxslider 缩略图分页器 Next prev 按钮

Question

我正在使用 bxslider，我正在尝试使用 Thumbnail pager next prev 按钮来移动缩略图，但我无法实现，你能帮我解决这个问题，以便我可以使用 thumbnail next prev 按钮实现缩略图滑块。

<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/