FlexSlider 2 redimensionnement du redimensionnement des fenêtres

Je crée un thème réactif pour WordPress construit sur Twitter Bootstrap. J'utilise le plugin jquery du diaporama FlexSlider sur la page d'accueil.

Malheureusement, lorsque je redimensionne mon navigateur, FlexSlider ne redimensionne pas gracieusement. Lorsque je vais plus étroit, l'image est susceptible d'être découpée … Si je vais plus loin, une partie de l'image suivante peut apparaître sur le côté. Cela arrive même lorsque j'utilise le code de démonstration à partir du site Web de FlexSlider. Cela se produit même sur la démo FlexSlider. Mais Dany Duchaine [Energized theme] [3] parvient à redimensionner FlexSlider très bien lorsque la fenêtre change. Quelqu'un peut-il expliquer comment il le fait ou suggérer toute façon d'améliorer le comportement de ma version?

Merci!

Vous avez probablement une solution ou avez évolué à ce stade, mais j'ai pensé que je devais signaler ce problème sur github pour les visiteurs: https://github.com/woothemes/FlexSlider/issues/391 (note la réponse de Patbouche). Cette solution a fonctionné pour moi. Je l'ai mis dans l' after: rappel.

 var slider1 = $('#slider1').data('flexslider'); slider1.resize();

J'ai dû lier l'événement de redimensionnement de la fenêtre pour que ce travail fonctionne de manière fiable. Étant donné que FlexSlider avant et après les rappels ne fonctionnait pas pour moi:

 $(window).bind('resize', function() { setTimeout(function(){ var slider = $('#banner').data('flexslider'); slider.resize(); }, 1000); });

J'ai combiné quelques-unes de ces solutions et j'ai ajouté une vérification pour m'assurer que le curseur existait sur la page en premier.

 $(function() { var resizeEnd; $(window).on('resize', function() { clearTimeout(resizeEnd); resizeEnd = setTimeout(function() { flexsliderResize(); }, 250); }); }); function flexsliderResize(){ if ($('.flexslider').length > 0) { $('.flexslider').data('flexslider').resize(); } }

Je pense qu'il vaut mieux le mettre avant le rappel:

 $('.flexslider').flexslider({ // your settings before: function(slider){ $('.flexslider').resize(); } });

J'ai essayé beaucoup de chemin, alors j'ai fait ça

 if( jQuery('.iframe').length ){ var interval = window.setInterval(function() { jQuery('.flexslider').resize(); }, 100); window.setTimeout(function(){ clearInterval(interval); },4000); }

Je voulais simplement ajouter une autre alternative au cas où quelqu'un connaitrait encore le problème "Flexslider redimensionne à un problème de largeur plus large mais pas inférieur"

L'utilisateur "PCandtheWeb" a suggéré d'ajouter ci-dessous si vous avez une table d'emballage, qui semble faire fonctionner

 .your-table { table-layout: fixed }

Source: https://github.com/woothemes/FlexSlider/issues/980