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

Question

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

Answer 1

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

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

为了实现这一点，我使用了slider.goToSlide(slideNumber,"direction");

方向可以是“ prev ”/“ next ”并确定我使用的slideNumberdata-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>