Question

我需要在点击下一个按钮时停止bx-slider autoslideshow，我有以下代码。

$(document).ready(function(){
    elementSlider=$(".monitor_slider").bxSlider({
    auto: true, pager: false,
});
$(".monitor_slider_container .bx-wrapper .bx-next").click(function(e){
        if(e.originalEvent !== undefined){
            elementSlider.stopAuto();
        }
    });
});

没有错误，但滑块会自动保持变换状态。

任何帮助都将非常感激。

请原谅我糟糕的英语。

Answer 1

更新

现在，您只需添加参数type: 'bar'，它将在单击控件的“上一个/下一个”时停止

$('.bxslider').bxSlider({
  auto: true,
  autoControls: true,
  stopAutoOnClick: true
});

来源：https://bxslider.com/examples/auto-show-start-stop-controls/

Answer 2

感谢@Rikard，我需要编写自己的控件。代码现在看起来像这样，问题就解决了。

$(document).ready(function(){
    elementSlider=$(".monitor_slider").bxSlider({
    auto: true, pager: false,
});

    $(".bx-next").toggleClass("px-next");
    $(".px-next").toggleClass("bx-next");
$(".px-next").click(function(e){
        if(e.originalEvent !== undefined){
            elementSlider.goToNextSlide();
            return false;    
        }
    });

    $(".bx-prev").toggleClass("px-prev");
    $(".px-prev").toggleClass("bx-prev");
    $(".px-prev").click(function(e){
        if(e.originalEvent !== undefined){
            elementSlider.goToPreviousSlide();
            return false;    
        }
    });
});

似乎当你使用goToNextSlide和goToPreviousSlide函数时，自动停止会停止。

如何在下次控制点击时停止bx-slider？

2 个答案: