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

问题

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?

回答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.

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

回答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;
        });
    }
});

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

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

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

回答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
});

回答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>

回答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.

回答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"))
 },

来源：https://stackoverflow.com/questions/20518566/bx-slider-how-to-continue-auto-sliding-after-clicking-in-default-bx-pager