it-swarm.com.de

bx slider: Wie wird das automatische Verschieben nach dem Klicken im standardmäßigen bx pager fortgesetzt?

Ich möchte den Autosliding-Vorgang fortsetzen, nachdem Sie auf ein Pager-Element geklickt haben. 

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

Die unkommentierte Funktion stopShow() und startShow() funktioniert überhaupt nicht. startAuto() setzt die Diaschau fort, die Bx-Pager-Navigation wird jedoch eingefroren. Der aktive Punkt bleibt auch dann aktiv, wenn eine neue Folie angezeigt wird. Wie löse ich das?

13
user2718671

Sie können es so versuchen:

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

Oder Sie können dies verwenden:

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

Der zweite ist für mich arbeiten.

19
Jawaad

Folgender Code funktioniert gut vor Ort. Versuch es bitte :

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

Das funktioniert für mich:

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

Um die Antwort zu verbessern, hat dies für mich auf beiden Handys funktioniert, wenn Sie klicken, wenn Sie sich in einem Browser befinden oder wenn Sie streichen, während Sie telefonieren.

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

Ich habe alle oben genannten Lösungen ausprobiert, aber kein Glück und ich verwende die neueste Version 4.1.2

In Jquery.bxslider.js füge "el.startAuto ();" hinzu.

/**
 * 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

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

Funktioniert perfekt für mich.

0
Starkadh

Anstelle von:

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

stellen Sie die Klick-Funktion so ein, dass sie direkt auf bx-prev und bx-next zeigt. Das funktioniert besser für mich.

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

das funktioniert gut ..

<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