web-dev-qa-db-fra.com

BxSlider affiche la dernière diapositive comme première diapositive

J'ai créé 4 curseurs. Initialement, tous les 4 sont masqués (affichage: aucun). J'ai donc utilisé ce code pour afficher le curseur correspondant au clic de sa catégorie respective.

La configuration du curseur. 

    touchEnabled: true,
    hideControlOnEnd: true,
    preloadImages: 'all',
    infiniteLoop: false,
    mode: 'horizontal',
    startSlide: 0,
    slideWidth: 300,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10,
    pager: false,
    slideSelector: ".isotope-item",
    nextSelector: "#forefoo2_next",
    prevSelector: "#forefoo2_prev",
    nextText: '',
    prevText: '',
    onSliderLoad: function(){
        jQuery(".sliloading").hide();
    },


jQuery(window).ready(function(){
    var slider4 = jQuery('.cat_fore').bxSlider();
    var slider2 = jQuery('#cat_two').bxSlider();
    var slider3 = jQuery('.cat_three').bxSlider();
    var slider1 = jQuery('.cat_one').bxSlider();

    jQuery("#sel_cat a" ).on("click", function(){
        var current     = jQuery(this).attr("slider");
        jQuery(".sliloading").show();

        jQuery(".slider").hide();
        if( current == "cat_one"){
            slider1.reloadSlider(s1config);
        }else if(current == "cat_two"){
            slider2.reloadSlider(s2config);
        }else if(current == "cat_three"){
            slider3.reloadSlider(s3config);
        }else if(current == "cat_fore"){
            slider4.reloadSlider(s4config);
        }
   }
});

Le problème est que lorsque le curseur a moins de 20 diapositives, il inverse le nombre de diapositives, c'est-à-dire qu'il affiche la dernière diapositive comme première diapositive. 

Cela fonctionne très bien pour les diapositives 20 ou plus de 20. J'ai également essayé différentes solutions répertoriées sur ce lien mais rien ne fonctionnait pour moi.
J'ai essayé de reproduire le même exemple sur violon qui fonctionne bien mais sur en direct cela pose toujours le même problème 

Je pense que le problème est dans la hauteur ou dans un autre élément CSS qui la fait démarrer à partir de la dernière diapositive, car dans le violon, le port d’affichage est petit. navigateur, il a également affiché le curseur de la bonne manière. 

javascriptjqueryjquery-pluginsbxslidersliders
12
Abhimanue Tamang

J'ai eu ce problème trop récemment. La solution est que vous devez mettre l'instance de BxSlider sur l'événement $ (window) .load () qui n'est pas dans $ (window) .ready () en voici un exemple.

$(window).load(function(){
            $('.bxslider').bxSlider({
                pagerCustom: '#bx-pager',
                randomStart: false,
                controls: true,
                auto: true
            });    
        });

Il est important de noter que le problème commence à persister une fois que vous avez au moins 7 diapositives.

15
Abetoy

Solution rapide:

.bx-clone{
   display: none !important;
}

Si vous ne voulez pas perdre l'animation de boucle infinie:

   onSliderLoad: function() {
      $("YOUR_SLIDER_SELECTOR").css(
         "-webkit-transform", 
         "translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)"
      );
    }
10
red_alert

Pour moi, il s’agit d’un bogue qui ne concerne que le chrome: la "diapositive de clone" destinée à faire du défilement continu de la dernière diapositive à la première montre le premier mouvement de la première diapositive. Masquer la diapositive est une solution rapide, mais brise l'effet de défilement infini.

Cette solution ci-dessous corrige cela pour moi strictement avec CSS, aucune transformation 3D gnarly CSS, Jquery, ou quoi que ce soit ... tout se passe bien avec bootstrap maintenant:

/* BUG FIX FOR CLONE SLIDE FIRST */

.bx-wrapper img {
    max-width: 100%;
    display: inline-block;
}

.bx-viewport li { 
    min-height: 1px; 
    min-width: 1px; 
}

Je pense que si vous utilisez jquery pour montrer le clone en utilisant onSlideBe avant d'aller trop loin, il y a probablement une correction CSS en fonction de votre situation spécifique. Parfois, cela provient d’un problème de taille d’image et/ou de style d’affichage avec BOOTSTRAP. Par conséquent, si vous utilisez BS, vous avez sûrement un correctif CSS. En général, si toutes les diapositives ont la même taille, essayez de définir la hauteur et la largeur, la hauteur et la largeur maximales et la hauteur et la largeur minimales pour les images.

Ce n'est pas nécessaire, mais si cela ne fonctionne pas, dans les options init de bxSlider, utilisez useCSS: false, ex: 

$(window).load(function(){
        $('.bxslider').bxSlider({
            pagerCustom: '#bx-pager',
            randomStart: false,
            controls: true,
            auto: true
            useCSS:false
        });    
    });
9
OG Sean

Vous devez juste arrêter la boucle:

infiniteLoop:false

... et il n'y a plus de .bx-clone

http://bxslider.com/options

3
user4482668

Comme mentionné par OG Sean, c'est un bug de Chrome.

J'ai le même problème et la seule chose nécessaire quand j'ai essayé était ce code CSS:

.bx-viewport li { min-height: 1px; min-width: 1px; }
2
Turbojohan

Travailler avec bxslider a été la plus grosse erreur de ma vie.

0
Martin Zvarík

Ok je ne sais pas pourquoi mais quand je supprime cette ligne "minSlides: 2", ça commence à fonctionner correctement.

0
Abhimanue Tamang
<li>
    <img src="_images/xxx.jpg" alt="xxx" width="X" height="X"/>
</li>

La définition d’une balise explicite de hauteur et de largeur sur les images dans le curseur a corrigé ce problème pour moi avec des curseurs contenant 2 à 5 images.

0
mrutt