Comment obliger bxSlider à masquer les diapositives jusqu'au chargement de la page?
Je construis un site Web qui utilise bxSlider .
Au fur et à mesure du chargement de la page, toutes les diapositives sont visibles, empilées les unes sur les autres. Une fois la page entièrement chargée, la première diapositive reste visible et le reste disparaît afin que le curseur puisse les animer et les afficher une par une.
J'ai essayé d'utiliser divers rappels CSS et bxSlider pour masquer les diapositives jusqu'à ce que la page soit entièrement chargée, mais sans succès. Est-ce que quelqu'un sait comment faire ça?
Merci!
bxslider a un rappel lorsque le curseur est chargé (onSliderLoad). J'ai défini la visibilité sur masqué sur un conteneur, puis je l'utilise pour définir la visibilité sur "visible".
<div id="siteslides" style="visibility: hidden;"></div>
$(".site_banner_slider").bxSlider({
auto: true,
slideWidth: $imageWidth,
mode: 'fade',
onSliderLoad: function(){
$("#siteslides").css("visibility", "visible");
}
});
J'ai eu le même problème et je l'ai contourné de cette façon:
<div class="mySlider" style="display:none">
puis
$(document).ready(function(){
$('.mySlider').show().bxSlider({
slideWidth: 160,
minSlides: 2,
maxSlides: 5,
preloadImages: 'all'
});
});
Mettez une div qui enveloppe tout le contenu et mettez un style="display:none" dessus. Ensuite, après avoir appelé bxslider, montrez-le simplement.
EX:
<script type="text/javascript">
$(document).ready(function(){
$('.bxlider').bxSlider({
displaySlideQty : 5,
prevText : "",
nextText : "",
moveSlideQty : 5,
infiniteLoop : false
});
$(".bxsliderWrapper").show("fade");
});
</script>
Aucune des solutions affichées n'a fonctionné pour moi.
Utilisation de la visibilité: masqué a simplement créé un grand espace vide sur la page.
Pour une raison quelconque, l'utilisation de display: aucune des diapositives ne s'est chargée, juste les commandes.
C'est la seule façon pour moi de trouver une solution raisonnable:
En CSS:
.ctaFtSlider
{
visibility: hidden;
height: 0;
}
Dans la fonction:
$(document).ready(function(){
$('.bxslider').bxSlider({
...
onSliderLoad: function(currentIndex){
$(".ctaFtSlider").css("visibility", "visible");
$(".ctaFtSlider").css("height", "auto");
}
});
});
Enfin, le HTML:
<div class="ctaFtSlider">
...
</div>
Ce que j'ai fini par faire a été ajouté du CSS pour cacher tout sauf la première diapositive.
Aucun balisage supplémentaire ou comportement requis et fonctionne sur tous les principaux navigateurs!
.bxslider {
li {
display: none;
&:first-child {
display: block;
}
}
}
Supposons que vous ayez:
HTML:
<ul class="slider">
<li>...</li>
<li>...</li>
</ul>
et jQuery:
jQuery('.slider').bxSlider({
...
});
Ensuite, la solution suivante ferait l'affaire en masquant toutes les diapositives sauf la première.
CSS:
ul.slider li:nth-child(n+2) {
display: none;
}
Lorsque le curseur est complètement chargé, chaque diapositive active aura automatiquement le style display: block.
J'ai eu le même problème et cette astuce m'a aidé:
<ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">
placez les valeurs height et overflow sur l'élément ul du curseur.
Meilleures salutations
J'ai essayé la plupart des solutions à ce problème et j'ai constaté qu'elles n'étaient pas assez perfectionnées pour ce que je cherchais. J'avais toujours une présentation saccadée une fois que le curseur avait été chargé. Utiliser .fade () était proche, mais cela s’animait de haut en bas à droite, ce qui paraissait étrange. La connexion à onSliderLoad fonctionne très bien, mais la visibilité changeante fait tout simplement apparaître le curseur à l'écran. Je cherchais un peu plus d'une entrée élégante, alors j'ai ajouté un cours au crochet, au lieu de changer le CSS.
jQuery:
$('.slider').bxSlider({
auto: false,
pager: false,
mode: 'fade',
onSliderLoad: function(){
$(".slide-clip").addClass('-visible');
}
});
TOUPET:
.slide-clip {
opacity:0;
max-width: 1305px; // Used as a clipping mask
max-height: 360px; // Used as a clipping mask
overflow:hidden; // Used as a clipping mask
margin:0 auto;
transition(all 275ms);
&.-visible {
transition(all 275ms);
opacity:1;
}
}
J'utilise un wrapper pour masquer mon curseur car j'en ai besoin dans mon cas, donc pour ceux que ça intéresse:
<div class="slide-clip">
<ul class="slider">
<li style="background-image: url('URL_HERE');"></li>
</ul>
</div>
Je ne me souviens plus de l'endroit où j'ai trouvé cela, mais je pense que c'est le moyen le plus propre de résoudre ce problème, car toutes les diapositives sont visibles au chargement de la page.
Commencez par ajouter un div autour de la liste non ordonnée de bxslider:
<div class="bxslider-wrap">
<ul class="bxslider">
<li>Image / Content </li>
<li>Image / Content </li>
<li>Image / Content </li>
</ul>
</div>
Ensuite, ajoutez cette ligne à votre fichier CSS qui masque le curseur entier lorsque la page est chargée:
.bxslider-wrap { visibility: hidden; }
Enfin, définissez le curseur sur visibilité: visible via jQuery (dans votre fichier js) lorsque le curseur se charge pour le rendre visible à nouveau!
jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
onSliderLoad: function(){
$(".bxslider-wrap").css("visibility", "visible");
}
});
});
J'espère que cela t'aides!
Avait ce même problème. J'ai utilisé le balisage ci-dessous et initialement caché le <div class="bxsliderWrapper"> contenant le CSS display: none;. J'ai remarqué que la largeur des diapositives <div class="slide"> était restituée à 1 pixels.
Je suppose que cela a quelque chose à voir avec la fonctionnalité réactive prenant les dimensions du conteneur initial masqué et la définition de styles en ligne pour chaque diapositive à apparier.
<div class="bxsliderWrapper">
<div class="bxslider">
<div class="slide">Your Content</div>
<div class="slide">Your Content</div>
<div class="slide">Your Content</div>
</div>
</div>
Ma solution est similaire à ce que bradrice a mentionné plus haut à propos de l’utilisation des fonctions de rappel intégrées. Je viens d'ajouter la fonction reloadSlider() à la fonction show() à la place.
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
var homeSlider = $j('.bxslider').bxSlider();
$j(".bxsliderWrapper").show(0, "swing", function(){homeSlider.reloadSlider();});
});
</script>
Cela déclenche le rechargement une fois que show () est terminé.
.
&EACUTE;DIT&EACUTE;
La solution originale ci-dessus fonctionnait initialement, mais je rencontrais des problèmes lorsque le cache était effacé lors d'une actualisation matérielle shift + REFRESH. Je suppose que les éléments ciblés par la fonction .show() n'étaient pas disponibles à temps ou que les ressources n'étaient pas encore chargées. (Je suppose) Vous trouverez ci-dessous une solution à ce problème.
Au lieu de masquer le curseur Bx contenant <div> avec display: none;, j'ai masqué les images de diapositive à l'aide de l'attribut CSS visibility.
.bxslider .slide {
visibility: hidden;
}
Cela permet au curseur de restituer à la taille correcte sans voir les images à l'écran jusqu'à ce qu'elles soient prêtes. Ensuite, j'ai utilisé la méthode jQuery .css() déclenchée par $j(window).load() pour modifier la visibilité une fois la page chargée. Cela garantissait que tout le code et tous les éléments existaient avant de les afficher.
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
var homeSlider = $j('.bxslider').bxSlider();
});
$j(window).load(function(){
$j(".bxslider .slide").css("visibility", "visible");
});
</script>
Cette méthode fonctionnait également avec plusieurs curseurs sur la même page. J'ai trouvé que la méthode .show() provoquait la rupture de toutes les occurrences du curseur. Je devine seulement pourquoi c'est une meilleure solution mais peut-être que quelqu'un peut ajouter quelques informations pour mieux comprendre cela.
Une solution CSS simple et rapide pour les navigateurs modernes (IE10 +) est:
.bxslider {
transform: scale(0);
}
Cela fonctionne car initialement, le curseur sera réduit à zéro, mais lorsque bxSlider sera chargé, il remplacera la transformation par un style en ligne.
J'avais ajouté un titre et un div de texte à mon curseur. Ainsi, lors du chargement, tout était empilé en haut de la page. Ainsi, avec l'aide de ce message, j'ai réussi à masquer les éléments de la diapositive, mais à afficher un élément de chargement:
Comme d'autres ci-dessus ont dit qu'une visibilité: classe cachée a été ajoutée à la div externe, mais j'ai aussi ajouté une visibilité: classe visible en dehors de cela pour afficher un ajax_loader, ont été mis à visible. Maintenant, au lieu d’avoir un espace vide moche pendant le chargement des diapositives, vous pouvez voir un chargeur, ce qui a donc plus de sens pour l’utilisateur:
jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
onSliderLoad: function(){
$(".slideouter").css("visibility", "visible");
$(".slideloader").css("visibility", "hidden");
},
autoControls: true,
auto: true,
mode: 'fade'
});
J'espère que cela aide, alors slideout est la div cachée dans votre css et slideloader est visible dans votre css, mais les deux sont échangés une fois le curseur chargé. J'espère que ça aide.
Cordialement, Lee
J'ai utilisé ce css et cela a fonctionné pour les écrans de largeur supérieure à 1200, car mon curseur correspond à la largeur maximale. La version de la tablette n'est pas encore fixée. Vous pouvez également essayer une quantité de% au lieu de pixels.
.banner est mon div principale pour mon slider bxslider.
.banner{overflow: hidden !important; height: 426px;}
@media screen and (max-width: 1200px){.banner{height: auto;}}<div class="banner">
<div class="bx-wrapper">
</div>
</div>Je ne connais pas exactement la méthode style = "display: none", mais lorsque "hide ()/fadeOut ()" est utilisé avec le conteneur de jQuery bxSlider, après quoi init bxSlider sera affiché avec des erreurs dans le balisage. (éventuellement en utilisant display: aucun n'éviterait l'erreur, mais si vous voulez atténuer le curseur de votre curseur, ma méthode serait applicable)
il suffit de positionner votre conteneur comme "absolu" dans css et dans votre JS avant l'initialisation de bxSlider, de le déplacer vers la partie invisible de la page, de l'initialiser puis de le masquer, de le ramener au point précédent et enfin de se fondre:
$("#bxslider-container").css({'left' : "4000px"});
$('.bxslider').bxSlider();
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000);
j'espère que ça va aider