Question

当我尝试使用自定义寻呼机bx滑块时，顶部的默认寻呼机未显示。任何人都可以帮助我显示bxslider中的寻呼机选项

Answer 1

在我的代码中，我使用了默认的寻呼机，并在JQuery的帮助下设计了缩略图，其名称为bubble-wrapper class，每个 li 都有自定义属性< strong>数据泡泡并包含特定图像。

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

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

方向可以是“上一步”/“下一步”并确定 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>

如何在bxslider中显示默认和自定义寻呼机

1 个答案: