web-dev-qa-db-fra.com

bxslider calcule une taille de fenêtre d'affichage incorrecte en charge

Quoi qu'il en soit, j'ai récemment commencé à utiliser bxslider et j'ai un problème avec cela. 

Il semble que sa taille de fenêtre d'affichage soit mal calculée au chargement de la page, ce qui signifie que cela ne fonctionne pas bien sur les appareils mobiles, les tablettes, etc.

Ce qui est étrange, c'est que lorsque je redimensionne la fenêtre du navigateur (même pour un pixel seulement), la hauteur de la fenêtre est calculée correctement et tout se présente bien. Mais si j'actualisais la page avec la même hauteur et la même largeur, bx-viewport ne serait pas correctement calculé.

Une idée pourquoi cela se passe?

Le HTML ressemble à quelque chose comme ça (et oui je suis conscient qu'il n'a probablement rien à voir avec ça, mais quand même):

<ul class="seminars-slider">
    <li>
        <article class="education-article">
            <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
            <p>LOL1</p>
            <div class="buttons">
                <a href="#" class="book-button"><span>Book now</span></a>
                <a href="#" class="read-more"><span>Read more</span></a>
            </div>
            <div class="clearall"></div>

        </article>
    <div class="clearall"></div>
    </li>

    // same li
    <li>
        <article class="education-article">
            <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
            <p>LOL1</p>
            <div class="buttons">
                <a href="#" class="book-button"><span>Book now</span></a>
                <a href="#" class="read-more"><span>Read more</span></a>
            </div>
            <div class="clearall"></div>

        </article>
    <div class="clearall"></div>
    </li>
</ul>

js call ressemble à:

slider=jQuery('.seminars-slider').bxSlider({
    mode: 'vertical',
    controls:false,
    pager:false,
    minSlides:2,
    maxSlides:2,
    moveSlides:1
});

jQuery('.up-control').click(function() {
    slider.goToNextSlide();
});
jQuery('.down-control').click(function() {
    slider.goToPrevSlide();
});

Merci.

jquerycssbxslider
17
Matija Milković

Il se peut que vous appeliez la fonction bxSlider trop tôt. Si vous l'invoquez de

$(document).ready(function() { ... });

envisager d'utiliser plutôt

$(window).load(function() { ... });

La différence entre ces deux fonctions est que (document) .ready attend que le DOM soit montré à l'utilisateur dans son état initial, alors que (window) .load attend que toutes les ressources aient été chargées dans le DOM.

51
iamvfl

Vous pouvez utiliser 

slider=jQuery('.seminars-slider').bxSlider({
    mode: 'vertical',
    controls:false,
    pager:false,
    minSlides:2,
    maxSlides:2,
    moveSlides:1
});
setTimeout(function(){
            slider.redrawSlider();
        },100);
7
gokul bs

"romelmederos" sur la page de bxslider github suggérée; 

"BxSlider v4.1 - Des problèmes de rendu du curseur surviennent car j'utilise des pourcentages pour la hauteur dans un site Web adaptatif pour mobile.

Donc, je devais faire le changement De: Slider.viewport.css ('height', getViewportHeight ()); À ceci: Slider.viewport.css ('height', ' ');

J'ai modifié le plugin avec une option dans ma copie, mais le moyen le plus rapide de changer consiste à modifier la ligne ci-dessus "

J'ai édité mon jquery.bxslider.js à la ligne 1290; Cela a fonctionné très bien pour moi et semble être une meilleure solution que window.load, (avec window.load, le curseur a été interrompu jusqu'à ce que tout soit chargé.) 

3
Matthew Watson

Si vous chargez l'élément <ul> avec ajax et qu'il contient des images, essayez slider.reloadSlider(); après le chargement. D'abord j'ai utilisé 

setTimeout('slider.reloadSlider()',1000);

attendre le chargement des images, mais je suis finalement passé à la bibliothèque de Nice ImagesLoaded qui attendra le chargement des images:

imagesLoaded('.seminars-slider', function() {
   slider.reloadSlider();
});

(a changé les noms de variables pour qu'ils correspondent à ceux de la question)

2
diynevala

Matthew Watson m'a donné une bonne idée et je suis allé dans le plugin et j'ai mis à jour la fonction getViewPortHeight () comme ceci:

var getViewportHeight = function(){
    var height = 0;
    children = slider.children;
    height = jQuery(slider.children[0]).height();;
    return height;
}

Alors maintenant, il prend la hauteur de la première image (espérons que ce sont toutes les mêmes…) et l’utilise pour déterminer la hauteur du curseur. Veuillez noter que vos commandes resteront toujours sous le curseur, mais cela peut être corrigé avec le positionnement css, etc.

J'espère que cela aidera des gens égarés.

0
MeanMatt

Trouvé une solution pour ce bug de safari. Vous devez avoir le mode du curseur horizontal (vous ne savez pas si la verticale fonctionne aussi, mais le fondu ne fonctionne pas du tout) Ensuite, vous devez obtenir la hauteur de la première image et la transmettre à ".bx-viewport". voici à quoi ressemble mon script:

$( "img.Banner" ).attr( "id", "first-slide" );
$('.bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'horizontal',
  auto: true
  });
$("#first-slide").load(function(){
  var height = $(this).height();
   $( ".bx-viewport" ).css( "height", height );
});
0
Jones MacNismond