如何在 bxslider 中显示默认和自定义分页器答案

【问题标题】：How to display default and custom pager in bxslider如何在 bxslider 中显示默认和自定义分页器
【发布时间】：2013-07-26 19:46:55
【问题描述】：

当我尝试为 bx 滑块使用自定义寻呼机时，顶部的默认寻呼机未显示。谁能帮我在 bxslider 中同时显示寻呼机选项

【问题讨论】：

你能贴一些代码吗？
$('#sliderRight').bxSlider({infiniteLoop: true, touchEnabled:true, oneToOneTouch:true, preventDefaultSwipeX:true, minSlides:1, maxSlides:1, moveSlides:1, slideWidth:0 , 控件:false, pager: true, pagerCustom: "#pager" });
您的#pager 包含什么？也发布您的 HTML 代码 sn-p。

标签： php jquery jquery-plugins bxslider

【解决方案1】：

在我的代码中，我使用了默认寻呼机，并在JQuery 的帮助下设计了缩略图，它被命名为bubble-wrapper class，每个 li 都有自定义属性 data-气泡 并包含特定的图像。

缩略图将包含图像，单击图像和滑块将显示该图像。

为此，我使用了slider.goToSlide(slideNumber,"direction");

方向可以是“prev”/“next”并确定 slideNumber 我使用了data-bubble。

<div class="bubble-wrapper">
    <ul>
        <li><a class="bubble" data-bubble="0"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
        <li><a class="bubble" data-bubble="1"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
        <li><a class="bubble" data-bubble="2"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
        <li><a class="bubble" data-bubble="3"><img src="images/photography.png" height="50" title="photography"/></a>
        </li>
    </ul>
</div>

<script>
var slider = $('.bxslider').bxSlider();
$('a.bubble').click(function () {
    var bubbledSlide=$(this).attr("data-bubble");
    console.log("bubbledSlide"+bubbledSlide);
    slider.goToSlide(bubbledSlide,'prev');
});
</script>

【讨论】：

请添加一些解释。传递底层逻辑比仅仅提供代码更重要，因为它可以帮助 OP 和其他读者自己解决这个问题和类似问题。
我没有投反对票，只是想指出你一开始并没有真正解释你的答案，只是一些代码。现在你添加了一些解释，所以 OP 可以检查一下。