bxslider calcul de la taille de champ de vision erronée en charge
bref, j'ai récemment commencé à utiliser bxslider et j'ai un problème avec ça.
il semble calculer sa taille de viewport à tort sur la charge de page, ce qui signifie qu'il ne fonctionne pas bien sur les appareils mobiles, tablettes, etc.
ce qui est bizarre, c'est que lorsque je redimensionne la fenêtre du navigateur(même pour un pixel) la hauteur du viewport est calculée correctement et tout semble parfait. Mais si je rafraîchis la page avec la même hauteur et largeur bx-viewport ne serait pas correctement calculer.
une idée de ce qui se passe?
HTML ressemble à quelque chose comme ceci(et oui je suis conscient qu'il n'a probablement rien à voir avec elle, mais tout de 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 appel 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.
6 réponses
il se peut que vous appeliez la fonction bxSlider trop tôt. Si vous êtes en invoquant de
$(document).ready(function() { ... });
envisagez plutôt d'utiliser
$(window).load(function() { ... });
La différence entre l'utilisation de ces deux fonctions est que (document).ready attend jusqu'à ce que le DOM soit montré à l'utilisateur dans son état initial, alors que (window).en fait, load attend que toutes les ressources aient été chargées sur le DOM.
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);
"romelmederos" sur le bxslider github page suggéré;
" BxSlider v4.(1) - Ayant des problèmes avec le rendu du curseur puisque j'utilise des pourcentages pour la hauteur dans un site Web responsive pour mobile.
Donc j'ai dû faire le changement de: curseur.fenêtre d'affichage.CSS ('height', getViewportHeight()); pour ce: curseur.fenêtre d'affichage.CSS ('height',");
j'ai modifié le plugin avec une option à la place dans ma copie, mais le moyen le plus rapide de changer est de modifier la ligne au-dessus de"
j'ai édité mon jquery.bxslider.js sur la ligne 1290; cela a bien fonctionné pour moi et semble une meilleure solution que la fenêtre.charge, (avec fenêtre.le glisseur a été cassé jusqu'à ce que tout soit chargé.)
si vous chargez le <ul> élément avec l'ajax et il contient des images, essayez slider.reloadSlider(); après le chargement. J'ai d'abord utilisé
setTimeout('slider.reloadSlider()',1000);
pour attendre que les images se chargent, mais finalement je suis passé à la bibliothèque nice ImagesLoaded qui va attendre les images à charger:
imagesLoaded('.seminars-slider', function() {
slider.reloadSlider();
});
(changement de variable noms correspondent à ceux de la question)
Matthew Watson m'a donné une bonne idée et je suis entré dans le plugin et mis à jour la fonction getviewporttheight() comme ceci :
var getViewportHeight = function(){
var height = 0;
children = slider.children;
height = jQuery(slider.children[0]).height();;
return height;
}
donc maintenant il prend la hauteur de la première image là-dedans (si tout va bien ils sont tous les mêmes...) et en utilisant cela pour déterminer la hauteur du curseur. S'il vous plaît noter, vos contrôles seront toujours assis sous le curseur, mais cela peut être corrigé avec le positionnement css, etc.
J'espère que cela aidera des gens perdus là-bas.
trouvé une solution pour ce bug safari. Vous devez avoir le mode du curseur à l'horizontale (pas sûr si vertical fonctionne aussi, mais le fondu n'est pas de travailler). Ensuite, vous devez obtenir la hauteur de la première image et la faire passer à l' ".BX-viewport". voici comment mon script ressemble à:
$( "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 );
});