FlexSlider 2 redimensionnement sur le redimensionnement de la fenêtre

Je suis en train de faire un thème sensible pour WordPress construit sur Twitter Bootstrap. Je suis à l'aide de la FlexSlider diaporama jquery plugin sur la page d'accueil.

Malheureusement, quand j'ai redimensionner mon navigateur, FlexSlider ne pas redimensionner normalement. Quand je vais plus étroit, plus l'image est responsable pour obtenir rognés.. si je vais plus large, une partie de l'image suivante peut apparaître sur le côté. Cela se produit même lorsque j'utilise le code de démonstration de la FlexSlider site web. Il arrive même, sur le FlexSlider démo. Mais Dany Duchaine [Dynamisé thème][3] gère pour redimensionner FlexSlider bien que la fenêtre d'affichage change. Quelqu'un peut-il expliquer comment il fait, ou de suggérer un moyen pour que je puisse améliorer le comportement de ma version?

Merci!

source d'informationauteur And Finally

  1. 14

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

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

    J'ai combiné un couple de ces solutions, et a également ajouté une assurez-vous que le curseur existé 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();
    }
}
  3. 3

    J'ai eu de lier la fenêtre de redimensionnement de l'événement, afin de le faire fonctionner de manière fiable.
    Depuis le FlexSlider avant et après rappels ne fonctionne pas pour moi:

    $(window).bind('resize', function() { 

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

});
  4. 2

    Je pense que c'est mieux de le mettre en avant rappel:

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

    J'ai essayé plusieurs façon, alors j'ai fait ce

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

    window.setTimeout(function(){
        clearInterval(interval);
    },4000);
}
  6. 1

    voulais juste ajouter encore une autre alternative au cas où quelqu'un est encore l'expérience de la "flexslider redimensionne à l'augmentation de la largeur, mais pas plus bas" problème

    utilisateur "PCandtheWeb" a suggéré d'ajouter le ci-dessous dans le cas où vous avez une table d'enrubannage, qui semble faire le travail

    .your-table
{
   table-layout: fixed
}

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

  7. 0
    $(window).load(function(){
    var mainslider;

    $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
            mainslider = slider;
        }
    });

    //force resize (carousel mode)
    $(window).on("resize", function() {
        //carousel resize code, around line 569 of query.flexslider.js
        mainslider.update( mainslider.pagingCount); 
        mainslider.newSlides.width(mainslider.computedW);
        mainslider.setProps(mainslider.computedW, "setTotal");
    });
});

    Je ne suis pas sûr que cela fonctionne pour tous les cas, mais pour un simple carrousel cela fonctionne!

  8. 0

    J'ai aussi essayé de plusieurs façons, mais aucun où travaille vraiment... Alors je l'ai fait manuellement, et il travaille maintenant: Enregistrer le curseur de données avant de changé par flexslider, lorsque la fenêtre est en cours de redimensionnement: détruire flexslider (https://stackoverflow.com/a/16334046/7334422) et de supprimer le nœud complètement, ajouter manuellement d'origine curseur nœud qui a été enregistré dans les données, ajouter à nouveau et initialiser flexslider... parce que c'est assez cher j'ai aussi ajouté le redimensionnement de la méthode (https://stackoverflow.com/a/40534918/7334422), afin de ne pas être exécuté pendant le redimensionnement... Oui c'est un peu de code et c'est très orthodoxe, mais ça fonctionne 🙂

    $.fn.resized = function (callback, timeout) {
    $(this).resize(function () {
        var $this = $(this);
        if ($this.data('resizeTimeout')) {
            clearTimeout($this.data('resizeTimeout'));
        }
        $this.data('resizeTimeout', setTimeout(callback, timeout));
    });
};

function myFlexInit(slider){
    slider.data("originalslider", slider.parent().html());
    slider.flexslider({
      animation: "slide",
      //... your options here
     });
}

 $(".flexslider").each(function() {
     myFlexInit($(this));
  });

  $(window).resized(function(){
      $(".flexslider").each(function() {
          $(this).removeData("flexslider");
          parent = $(this).parent();
          originalslider = $(this).data("originalslider");
          $(this).remove();
          parent.append(originalslider);
          newslider = parent.children().first();
          myFlexInit(newslider);
      });
  }, 200);

    Mieux vous enveloppez votre curseur dans un conteneur unique:

    <div class="sliderparent">
     <div class="flexslider">
        <ul class="slides">

        </ul>
      </div>
 </div>