Slick.js: Masque le curseur jusqu'à ce que les images soient chargées
À l'aide de Slick.jscomment fait-on cacher la glisser jusqu'à ce que les images ont chargé ou au moins la première image a été chargée? J'ai essayé d'utiliser init
mais ne pouvait pas le faire fonctionner. Rien n'est sortie de la console, soit.
var $slider = $('.slider').slick({
fade: true,
focusOnSelect: true,
lazyLoad: 'ondemand',
speed: 1000
});
$('.slider').on('init', function(slick) {
console.log('fired!');
$('.slider').fadeIn(3000);
});
J'ai aussi essayé window load
mais qui n'ont pas le fixer.
$(window).load(function() {
$('.slider').fadeIn(3000);
});
source d'informationauteur J82
Vous devez vous connecter pour publier un commentaire.
Assurez-vous de lier la
init
événement avant l'initialisation de slick.Exemple: http://jsfiddle.net/b5d5mL7p/
Je sais que c'est une vieille question, mais cela a fonctionné pour moi dans une situation similaire, lorsque le problème est que toutes les lames ont été affichée à la fois et c'était horrible et jumpy.
La résolution est de la pure CSS.
D'abord, vous ajoutez CSS à votre nappe de curseur wrapper:
Après le curseur est initialisé, la nappe ajoute .slick-initialisé classe à la wrapeper. Vous pouvez l'utiliser pour ajouter:
Espère que cela aide quelqu'un qui bute sur cette question, comme je l'ai fait.
Slick ajoute la classe "slick-initialisé' à l'emballage que vous appelez le "slick" sur.
Définir toutes les diapositives à l'exception de la première à
display:none
sur la charge initiale et vous obtenez le curseur à la bonne hauteur, à ne pas sauter sur la nappe de charge. Lorsque la nappe est initialisé, vous voulez tous de retour àdisplay: block
.CSS
Le problème, c'est qu'avant slick curseur est initialisé, vous pouvez voir tous vos diapositives, depuis le balisage est tout simplement un div liste. Je pense que cacher le curseur, puis la décoloration il ne semble pas très lisse, quand la page est chargée. Je voudrais essayer ceci à la place:
où la hauteur doit être ajustée à la hauteur de vos images puis
Cela a aussi l'avantage que les points et les flèches n'apparaissent que lorsque le curseur est initialisé.
J'ai ce code:
Structure de la nappe de mon curseur
Ensemble
visibility: hidden
sur votre carrousel wrapper par défaut, et ajouter.slick-initialized { visibility: visible; }
.Une fois nappe est initialisé, il ajoute de la nappe-initialisé classe wrapper qui apportera sa visibilité arrière.