bx slider: How to continue auto sliding after clicking in default bx pager?

Question

I want to continue the autosliding after clicking on a bx pager item.

Here's the code:

$(document).ready(function () {
    $('.bxslider').bxSlider({
        mode: 'horizontal', //mode: 'fade',            
        speed: 500,
        auto: true,
        infiniteLoop: true,
        hideControlOnEnd: true,
        useCSS: false
    });

    $(".bx-pager-link").click(function () {
        console.log('bla');            
        slider = $('.bxslider').bxSlider();
        slider.stopAuto();
        slider.startAuto();
        //slider.stopShow();
        //slider.startShow();
    });
});

The uncommented stopShow() and startShow() function doesn't work at all. startAuto() continues the slideshow but the bx pager navigation is frozen. The active dot stays active even if new slide appears. How to solve that?

Answer 1

You can try it like this:

$(document).ready(function () {
    var slider = $('.bxslider').bxSlider({
        mode: 'horizontal', //mode: 'fade',            
        speed: 500,
        auto: true,
        infiniteLoop: true,
        hideControlOnEnd: true,
        useCSS: false
    });

    $(".bx-pager-link").click(function () {
        console.log('bla');            
        slider.stopAuto();
        slider.startAuto();
    });
});

Or you can use this:

$(document).ready(function () {
    var slider = $('.bxslider').bxSlider({
        mode: 'horizontal', //mode: 'fade',            
        speed: 500,
        auto: true,
        infiniteLoop: true,
        hideControlOnEnd: true,
        useCSS: false
    });

    $('.bx-pager-item a').click(function(e){
        var i = $(this).index();
        slider.goToSlide(i);
        slider.stopAuto();
        restart=setTimeout(function(){
            slider.startAuto();
            },500);

        return false;
    });
});

The second is works for me.

Answer 2

Following code working fine in site. Please try it :

var slider = $('.bxslider').bxSlider({
    auto: true,
    pager: false,
    autoHover: true,
    autoControls: true,
    onSlideAfter: function() {
        slider.stopAuto();
        slider.startAuto();
    }
});

Answer 3

This works for me:

var slider = $('.bxslider').bxSlider({
    auto: true,
    controls: false,
    onSliderLoad: function () {
        $('.bx-pager-link').click(function () {
            var i = $(this).data('slide-index');
            slider.goToSlide(i);
            slider.stopAuto();
            slider.startAuto();
            return false;
        });
    }
});

Answer 4

var clickNextBind = function(e){
            // if auto show is running, stop it
            if (slider.settings.auto) el.stopAuto(); **<--- You must Delete this row.**
            el.goToNextSlide();
            e.preventDefault();
        }

Answer 5

For improving the answer, this worked for me on both mobile when you click if you are in a browser or if you swipe when you are on the phone, is clean, short and simple:

var slider = $('.slider');
    slider.bxSlider({
        auto: true,
        autoControls: true,
        onSlideAfter: function() {
            slider.startAuto()
        }
    });

Answer 6

I tried all the solutions above, but no luck and I'm using the latest version 4.1.2

In Jquery.bxslider.js add "el.startAuto();"

/**
 * Click next binding
 *
 * @param e (event)
 *  - DOM event object
 */
var clickNextBind = function(e){
    // if auto show is running, stop it
    if (slider.settings.auto) el.stopAuto(); 
    el.goToNextSlide();
    e.preventDefault();
     el.startAuto();
}

/**
 * Click prev binding
 *
 * @param e (event)
 *  - DOM event object
 */
var clickPrevBind = function(e){
    // if auto show is running, stop it
    if (slider.settings.auto) el.stopAuto();
    el.goToPrevSlide();
    e.preventDefault();
     el.startAuto();
}

Answer 7

Instead of using:

$('.bx-pager-item a').click(function(e){
    //blah
});

set the click function to point directly to the bx-prev and bx-next. This one works better for me.

$('.bx-prev, .bx-next').click(function(e){
    //blah
});

Answer 8

this is working good ..

<script type="text/javascript">
  jQuery(document).ready(function(){

        jQuery('.bxslider').bxSlider({
         video: true,
          useCSS: false,
          });

           $(".bx-controls-direction").click(function () {
            console.log('bla');            
            slider = $('.bxslider').bxSlider();
            slider.stopVideo();
            slider.startVideo();
            //slider.stopShow();
            //slider.startShow();
        });

});
</script>

Answer 9

This code :

var slider = $('.bxslider').bxSlider();

$('.bx-pager-link').click(function () {
    var i = $(this).attr('data-slide-index');
    slider.goToSlide(i);
    slider.stopAuto();
    slider.startAuto();
    return false;
});

Works perfectly for me.

Answer 10

In jquery.bxslider.min.js, search for and hide

r.stopAuto= function(t) {

//o.interval && (clearInterval(o.interval), o.interval = null, o.settings.autoControls && // 1 != t //&& A("start"))
 },