bxslider boucle infinie défile de gauche à la première diapositive au lieu de droite à boucle

Ce qui semble se produire pour moi lorsque j'ai mis minSlides à 1. Aucune des autres solutions n'a fonctionné pour moi, mais en changeant de minSlides à plus de 1 arrête le problème de produit.

À la recherche dans ce en outre, il y a un problème soulevé sur GitHub que les drapeaux - il y a un coussin intégré dans le plugin pour la largeur du conteneur qui n'est pas assez grand:
https://github.com/stevenwanderski/bxslider-4/issues/467

Il y a une solution simple commis en attente d'être fusionnés:
https://github.com/stevenwanderski/bxslider-4/pull/468/files

Je l'ai essayé, et il a travaillé pour moi.

OriginalL'auteur crdunst

C'est ce qui a finalement fonctionné pour moi. Ce qui m'a pris âge de travailler, mais les guillemets simples pour les valeurs, les autres réponses énumérés ci-dessus, fixe le rouleau de revenir à la première diapositive de question. Maintenant en douceur des transitions à la première.

    <script type="text/javascript">
       $(document).ready(function(){
       $('.bxslider').bxSlider({
           pager: 'false',
           mode: 'horizontal',
           auto: 'true',
           speed:  '900',
           pause:  '6000',
           controls: 'false',
           slideMargin: '20',
           slideWidth:  '940',
           infiniteLoop: 'true',
           maxSlides: '1',
           moveSlides: '1',
           moveSlideQty: '1',
           useCSS: 'false',

        });
        });
    </script>

OriginalL'auteur adrian

Si vous utilisez WordPress et votre curseur dans la barre latérale puis le problème semble être que le slideMargin option (>0) est l'arrêt de l'images dans l'ordre. Ce sont les paramètres que j'ai utilisé:

<script type="text/javascript">
jQuery(window).load(function() {
    jQuery('.testimonials-slider').bxSlider({
            minSlides: 1,
            maxSlides: 1,
            slideMargin: 0,
            infiniteLoop:true,
            autoReload:true,
            auto: <?php echo isset($data['auto']) ? $data['auto'] : "true";?>,
            pager:<?php echo isset($data['pager']) ? $data['pager'] : "true";?>,                
            adaptiveHeight:true,
            controls:<?php echo isset($data['controls']) ? $data['controls'] : "true";?>,
            autoControls: false,
            speed:<?php echo ((isset($data['speed'])) and (!empty($data['speed']))) ? $data['speed'] : "500";?>,
            mode:'<?php echo isset($data['mode']) ? $data['mode'] : "horizontal";?>',
            randomStart:<?php echo isset($data['randomstart']) ? $data['randomstart'] : "false";?>,
            pause: <?php echo ((isset($data['pause'])) and (!empty($data['pause']))) ? $data['pause'] : "5000";?>
    });
});
</script>

Simplement ignorer les paramètres de PHP. La chose principale est de mettre en slideMargin: 0, infiniteLoop:true, autoReload:true,

OriginalL'auteur rhysclay

Mon problème était un peu différent, mais cela peut aider quelqu'un.

Je travaillais avec un boxslider. Disons que j'ai eu quatre diapositives automatiquement en rotation sur le carrousel. Le code que j'ai commencé avec a été configuré pour démarrer à la 1ère diapositive, et s'arrêter à la dernière. Je voulais que la rotation continue ou effectuer une "infiniteloop". Lorsque j'ai mis la boucle infinie de vrai dans jquery.bxslider.js le curseur d'affichage des diapositives 1 et 2, et quand il a obtenu à 3, il serait zip à travers elle et l'affichage de la diapositive 1, puis 4, puis recommencer à nouveau. Bien sûr, cela provoque un problème pour le contenu que je veux afficher sur la diapositive 3. Mon code est ci-dessous, et ce que j'ai fait pour le résoudre.

<script src="common/js/jquery.bxslider.js"></script>
<link href="common/css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){


$('.slider1').bxSlider({
mode: 'horizontal',
slideWidth: 940,
minSlides: 1,
maxSlides: 9,
slideMargin: 20,
controls: true


 });
});
</script>



<div id="carousel">


<div class="slider1">
        <div class="slide">[STUFFHERE]</div>
        <div class="slide">[STUFFHERE]</div>
        <div class="slide">[STUFFHERE]</div>
        <div class="slide">[STUFFHERE]</div>
        </div>
        </div>

Modifiant les paramètres dans jquery.bxslider.js de sorte que la boucle infinie est vrai

//GENERAL
    mode: 'horizontal',
    slideSelector: '',
    infiniteLoop: true,
    hideControlOnEnd: false,
    speed: 500,
    easing: 'ease',
    slideMargin: 0,
    startSlide: 0,
    randomStart: false,
    captions: false,
    ticker: false,
    tickerHover: false,
    adaptiveHeight: false,
    adaptiveHeightSpeed: 500,
    video: false,
    useCSS: true,
    preloadImages: 'all',
    responsive: true, 

Ce que j'avais à faire était de changer les min/maxslides valeurs. Quelle que soit ils ont des valeurs par défaut ont été, ils n'étaient pas en permettant à l'infiniteloop paramètre pour fonctionner correctement. Il peut prendre un certain expérimenter en fonction de vos propres exigences pour le curseur, mais c'est ce qui a fonctionné pour mon problème.

$(document).ready(function(){


$('.slider1').bxSlider({


 mode: 'horizontal',


slideWidth: 940,
minSlides: <!--from 1--> to 0,

maxSlides: <!--from 9--> to 1,

slideMargin: 20,


controls: true

OriginalL'auteur Bob