bx 滑块:单击默认 bx 寻呼机后如何继续自动滑动?

问题描述

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

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

代码如下:

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

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

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?

推荐答案

你可以这样试试:

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

或者你可以使用这个:

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

第二个对我有用.

这篇关于bx 滑块:单击默认 bx 寻呼机后如何继续自动滑动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！