web-dev-qa-db-fra.com

Redimensionnement de FlexSlider 2 lors du redimensionnement de la fenêtre

Je fais un thème sensible pour WordPress construit sur Twitter Bootstrap. J'utilise le plugin FlexSlider slideshow jquery sur la page d'accueil.

Malheureusement, lorsque je redimensionne mon navigateur, FlexSlider ne se redimensionne pas correctement. Lorsque je rétrécis, l'image est susceptible d'être rognée. Si j'agrandis, 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 du site Web FlexSlider. Cela arrive même sur la démo de FlexSlider. Mais [Thème Energized] [3] de Dany Duchaine parvient à redimensionner FlexSlider de manière satisfaisante à mesure que la fenêtre d'affichage change. Quelqu'un peut-il expliquer comment il le fait ou suggérer de quelque manière que ce soit que je puisse améliorer le comportement de ma version?

Merci!

javascriptjquerycsstwitter-bootstrapresponsive-design
15
And Finally

Vous avez probablement une solution ou êtes passé à ce stade, mais je pensais signaler ce problème à github pour les visiteurs: https://github.com/woothemes/FlexSlider/issues/391 (remarque de patbouche ). Cette solution a fonctionné pour moi. Je le mets dans le callback after:.

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

J'ai combiné quelques-unes de ces solutions et ajouté un contrôle pour vérifier que le curseur existait en premier sur la page.

$(function() { 
    var resizeEnd;
    $(window).on('resize', function() {
        clearTimeout(resizeEnd);
        resizeEnd = setTimeout(function() {
            flexsliderResize();
        }, 250);
    });
});

function flexsliderResize(){ 
    if ($('.flexslider').length > 0) {
        $('.flexslider').data('flexslider').resize();
    }
}
4
Jacob Mitchell

Je devais lier l’événement window resize afin que cela fonctionne de manière fiable. Depuis le FlexSlider avant et après les rappels ne fonctionnaient pas pour moi:

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

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

});
3
Natacha Beaugeais

Je pense qu'il est préférable de le mettre dans avant callback:

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

J'ai essayé de nombreuses façons, puis j'ai fait ça

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

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

je voulais juste ajouter encore une autre alternative au cas où quelqu'un rencontrerait encore le "flexslider redimensionne à une largeur plus grande, mais pas inférieure" problem

l’utilisateur "PCandtheWeb" a suggéré d’ajouter ce qui suit au cas où vous auriez une table d’emballage qui semble faire le travail

.your-table
{
   table-layout: fixed
}

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

1
Tiago Duarte

J'ai également essayé de nombreuses manières, mais aucune ne fonctionnait vraiment ... Ensuite, je l'ai fait manuellement et cela fonctionne maintenant: enregistrez les données du curseur avant de les modifier par flexslider, lorsque la fenêtre est en train de redimensionner: destroy flexslider ( https: // stackoverflow .com/a/16334046/7334422 ) et supprimez complètement le noeud, ajoutez manuellement le noeud du curseur original qui a été enregistré dans les données, ajoutez-le à nouveau et initialisez flexslider ... car cela est assez coûteux, j’ai également ajouté une méthode redimensionnée ( https://stackoverflow.com/a/40534918/7334422 ), afin de ne pas être exécuté pendant le redimensionnement ... Oui, c'est du code et c'est un peu hacky, 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);

Vous feriez mieux de placer votre curseur dans un conteneur unique:

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

        </ul>
      </div>
 </div>
1
chakmear
$(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 celui-ci fonctionnera dans tous les cas, mais cela fonctionne pour un simple carrousel!

0
Luca Di Lenardo