jQuery bx 滑块：单击默认 bx 寻呼机后如何继续自动滑动？

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

提问by user2718671

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

单击 bx 寻呼机项目后，我想继续自动滑动。

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?

未注释的stopShow()和startShow() 函数根本不起作用。startAuto()继续播放幻灯片，但 bx 寻呼机导航被冻结。即使出现新幻灯片，活动点也会保持活动状态。如何解决？

回答by Jawaad

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.

第二个对我有用。

回答by Vipul Jethva

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

回答by doige

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

回答by KOMENIX

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

回答by sandino

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

回答by Bala

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

我尝试了上述所有解决方案，但没有运气，我使用的是最新版本 4.1.2

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

在 Jquery.bxslider.js 中添加“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();
}

回答by JSNYC User

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。这个对我来说效果更好。

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

回答by user3778023

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>

回答by Starkadh

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.

非常适合我。

回答by isac costa

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

在jquery.bxslider.min.js，搜索和隐藏

r.stopAuto= function(t) {

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