Ползунок bx: Как продолжить автоматическое скольжение после нажатия на пейджер по умолчанию bx?

Я хочу продолжить автоклимирование после нажатия на элемент пейджера bx.

Здесь код:

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

});

Функция uncommented stopShow() и startShow() вообще не работает. startAuto() продолжает показ слайдов, но навигация пейджера bx заморожена. Активная точка остается активной, даже если появляется новый слайд. Как это решить?

Ответ 1

вы можете попробовать это следующим образом:

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

});

Вторая работа для меня.

Ответ 2

Следующий код работает нормально на сайте. Попробуйте:

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

Ответ 3

это работает для меня:

        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

Для улучшения ответа это работало для меня на обоих мобильных устройствах, когда вы нажимаете, если вы находитесь в браузере, или если вы прокручиваете, когда находитесь на телефоне, является чистым, коротким и простым:

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

Ответ 6

Я пробовал все вышеперечисленные решения, но мне не повезло, и я использую последнюю версию 4.1.2

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

Ответ 7

Вместо использования:

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

установите функцию щелчка, чтобы указать прямо на bx-prev и bx-next. Это работает лучше для меня.

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

Ответ 8

это работает хорошо.

<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

Этот код:

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

Отлично работает для меня.

Ответ 10

В jquery.bxslider.min.js найдите и скройте

r.stopAuto= function(t) {

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