How do I stop bx-slider on next control click?

Question

I need to stop the bx-slider autoslideshow when the next button gets clicked, I have the following code.

$(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();
        }
    });
});

No erros, but the slider keeps on changin automatically.

Any help will be really appreciated.

And forgive my bad english.

http://stackoverflow.com/a/10689253/2427193 – Rikard Jul 16 '13 at 15:29 — Rikard, Jul 16 '13 at 15:29

score 1 · Accepted Answer · answered Jul 09 '20 at 13:00

UPDATE

Now you can just add the parameter stopAutoOnClick: true and it will stop on click of the controls Next/Prev

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

Source : https://bxslider.com/examples/auto-show-start-stop-controls/

score 0 · Answer 2 · answered Jul 16 '13 at 16:22

Thanks to @Rikard, I needed to write my own controls. The code now looks like this and the problem is solved.

$(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;    
        }
    });
});

It seems that when you use the goToNextSlide and goToPreviousSlide functions the autoshow stops.

How do I stop bx-slider on next control click?

2 Answers2