web-dev-qa-db-ja.com

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

コメントされていないstopShow()および_startShow(_）関数はまったく機能しません。 startAuto()はスライドショーを続行しますが、bxページャーナビゲーションはフリーズします。新しいスライドが表示されても、アクティブなドットはアクティブのままです。それを解決する方法は？

jquerynavigationbxslider
13
user2718671

次のように試すことができます：

$(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番目は私にとってはうまくいきます。

19
Jawaad

次のコードはサイトで正常に動作しています。試してみてください：

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

これは私のために働く：

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;
        });
    }
});
3
doige
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();
        }
2
KOMENIX

答えを改善するために、ブラウザでクリックしているとき、または電話中にスワイプするときの両方で、これは私にとってうまくいきました、きれいで、短く、簡単です：

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

上記のすべてのソリューションを試しましたが、運がなく、最新バージョン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();
}
1
Bala

このコード：

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

私にぴったりです。

0
Starkadh

代わりに：

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

クリック機能がbx-prevとbx-nextを直接指すように設定します。これは私にとってはうまく機能します。

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

これはうまく機能している..

<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>
0
user3778023