Flexslider : Désactiver smoothHeight après le chargement initial

Question

J'aime l'effet que produit le smoothHeight initial lors du chargement de la page. Je déteste la façon dont il réagit lentement au redimensionnement d'une page après le chargement initial. J'aimerais conserver l'effet pour le chargement initial de la page, puis revenir au redimensionnement par défaut sans animation. Cela fait des heures que je cherche à résoudre ce problème. En remettant la variable smoothHeight à false à la fin de la fonction smoothHeight elle-même, je peux remettre la variable à false après l'animation initiale, mais cela désactive tout redimensionnement de la hauteur après le chargement initial. Cela semble être une opération très simple, mais je n'arrive pas à la comprendre. Merci d'avance pour toute idée !

En fait, lorsque ce bloc est exécuté une fois, il définit la hauteur de telle sorte que, même lorsque la variable redevient fausse, la hauteur n'est plus flexible.

smoothHeight: function(dur) { if (!vertical || fade) { var $obj = (fade) ? slider : slider.viewport; (dur) ? $obj.animate({"height": slider.slides.eq(slider.animatingTo).height()}, dur) : $obj.height(slider.slides.eq(slider.animatingTo).height()); } }

Answer 1

J'ai remis la variable smoothHeight à "false" au début de la fonction de redimensionnement, afin qu'après le chargement initial de la page, la hauteur ne soit plus animée lors du redimensionnement. Ensuite, j'ai défini la hauteur de slider.viewport à "100%" dans la fonction de redimensionnement, ce qui réinitialise la hauteur et à partir de là, le redimensionnement de la page est réactif :) Enfin, j'ai ajouté la fonction resetHeight variable booléenne en haut du script qui est mise à false lorsque resize s'exécute pour la première fois, afin qu'il ne gaspille pas de ressources en fixant la hauteur du viewport à 100% à chaque fois que la page est redimensionnée.

resize: function() { if(resetHeight) { slider.viewport.height("100%"); resetHeight=false;} if (!slider.animating && slider.is(':visible')) { if (!carousel) slider.doMath(); if (fade) { // SMOOTH HEIGHT: methods.smoothHeight(); } else if (carousel) { //CAROUSEL: slider.slides.width(slider.computedW); slider.update(slider.pagingCount); slider.setProps(); } else if (vertical) { //VERTICAL: slider.viewport.height(slider.h); slider.setProps(slider.h, "setTotal"); } else { // SMOOTH HEIGHT: if (vars.smoothHeight) methods.smoothHeight(); slider.newSlides.width(slider.computedW); slider.setProps(slider.computedW, "setTotal"); } } }, smoothHeight: function(dur) { if (!vertical || fade) { var $obj = (fade) ? slider : slider.viewport; (dur) ? $obj.animate({"height": slider.slides.eq(slider.animatingTo).height()}, dur) : $obj.height(slider.slides.eq(slider.animatingTo).height()); } },

Answer 2

Désactiver la hauteur lisse du FlexSlider au redimensionnement et la hauteur de transition du FlexsSider au redimensionnement.

Dans mon cas, j'ai dû arrêter le FlexsSider pour qu'il s'adapte en douceur à la hauteur du viewport après le redimensionnement.

la solution n'était pas dans le .js fichier.

Je viens d'éliminer l'effet de transition dans l'image. .css c'est ce qui a créé le retard :

.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}

Changé en ceci :

.flex-viewport {max-height: 2000px;}

Meilleures salutations