web-dev-qa-db-fra.com

curseur bx: Comment continuer le glissement automatique après avoir cliqué sur le téléavertisseur bx par défaut?

Je souhaite poursuivre le défilement automatique après avoir cliqué sur un élément de pagineur bx. 

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

Les fonctions stopShow() et startShow() non commentées ne fonctionnent pas du tout. startAuto() continue le diaporama mais la navigation du pager bx est figée. Le point actif reste actif même si une nouvelle diapositive apparaît. Comment résoudre ça?

jquerynavigationbxslider
13
user2718671

Vous pouvez l'essayer comme ça:

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

Ou vous pouvez utiliser ceci:

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

La seconde est des travaux pour moi.

19
Jawaad

Le code suivant fonctionne correctement sur le site. Essayez-le :

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

Cela fonctionne pour moi:

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

Pour améliorer la réponse, cela a fonctionné pour moi sur les deux mobiles lorsque vous cliquez sur si vous êtes dans un navigateur ou si vous glissez lorsque vous êtes au téléphone, c'est propre, court et simple:

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

J'ai essayé toutes les solutions ci-dessus, mais pas de chance et j'utilise la dernière version 4.1.2

Dans Jquery.bxslider.js, ajoutez "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

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

Fonctionne parfaitement pour moi.

0
Starkadh

À la place d'utiliser:

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

configurez la fonction click pour qu'elle pointe directement sur bx-prev et bx-next. Celui-ci fonctionne mieux pour moi.

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

cela fonctionne bien ..

<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