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

pdsfdshx 于 2023-06-22 发布在 jQuery

关注(0)|答案(1)|浏览(149)

我正在使用bxslider，我试图缩略图寻呼机下一个上一个按钮来移动缩略图，但我无法实现，你能帮我整理这一个，所以我可以实现缩略图滑块与缩略图下一个上一个按钮。

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

jquery

来源：https://stackoverflow.com/questions/21042884/how-can-i-implement-bxslider-thumbnail-pager-next-prev-button

1条答案

按热度按时间

t9eec4r01#

假设您正在寻找滑块下方的第二个上一个/下一个操作。
按如下方式调用滑块：

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/

赞(0）回复(0）举报 2023-06-22

我来回答

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

1条答案

相关问题

热门标签

最新问答