it-swarm.com.de

FlexSlider 2 ändert die Größe des Fensters

Ich erstelle ein responsives Theme für WordPress, das auf Twitter Bootstrap basiert. Ich verwende das FlexSlider slideshow jquery Plugin auf der Homepage.

Wenn ich die Größe meines Browsers verändere, wird die Größe von FlexSlider leider nicht ordnungsgemäß angepasst. Wenn ich schmaler werde, wird das Bild möglicherweise abgeschnitten. Wenn ich breiter werde, wird möglicherweise ein Teil des nächsten Bildes zur Seite verschoben. Dies passiert auch, wenn ich den Demo-Code von der FlexSlider-Website verwende. Das passiert sogar in der FlexSlider-Demo. Dany Duchaines [Energized theme] [3] schafft es jedoch, die Größe von FlexSlider ansprechend zu ändern, wenn sich das Ansichtsfenster ändert. Kann mir jemand erklären, wie er es macht oder wie ich das Verhalten meiner Version verbessern kann?

Vielen Dank!

15
And Finally

Sie haben wahrscheinlich eine Lösung oder sind in diesem Stadium weitergegangen, aber ich dachte, ich würde auf dieses Problem bei Github für Besucher hinweisen: https://github.com/woothemes/FlexSlider/issues/391 ). Diese Lösung hat bei mir funktioniert. Ich habe es in den after:-Rückruf eingefügt.

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

Ich habe einige dieser Lösungen kombiniert und außerdem eine Überprüfung hinzugefügt, um sicherzustellen, dass der Schieberegler zuerst auf der Seite vorhanden ist.

$(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

Ich musste das Fenstergrößenänderungsereignis binden, damit dies zuverlässig funktioniert. Da der FlexSlider vor und nach Rückrufen bei mir nicht funktioniert hat:

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

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

});
3

Ich denke, es ist besser, es in vor Rückruf zu setzen:

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

Ich habe es auf viele Arten versucht, dann habe ich es getan

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

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

ich wollte nur noch eine weitere Alternative hinzufügen, falls noch jemand das "flexslider resizes to higher width, but not lower" Problem hat

benutzer "PCandtheWeb" schlug vor, das Folgende hinzuzufügen, falls Sie eine Umhüllungstabelle haben, die den Job erledigt

.your-table
{
   table-layout: fixed
}

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

1
Tiago Duarte

Ich habe auch viele Möglichkeiten ausprobiert, aber keine hat wirklich funktioniert ... Dann habe ich es manuell gemacht und es funktioniert jetzt: Speichere die Schieberegler-Daten, bevor sie von FlexSlider geändert werden, wenn die Fenstergröße geändert wird: Zerstöre FlexSlider ( https: // stackoverflow .com/a/16334046/7334422 ) und Knoten vollständig löschen, ursprünglichen Schiebereglerknoten, der in Daten gespeichert wurde, manuell hinzufügen, erneut hinzufügen und Flexslider initialisieren ... da dies ziemlich teuer ist, habe ich auch eine Methode mit geänderter Größe hinzugefügt ( https://stackoverflow.com/a/40534918/7334422 ), um beim Ändern der Größe nicht ausgeführt zu werden ... Ja, es handelt sich um Code und es ist etwas verrückt, aber es funktioniert :)

$.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);

Sie wickeln Ihren Slider besser in einen eigenen, einzigartigen Behälter:

<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");
    });
});

Ich bin mir nicht sicher, ob das für alle Fälle funktioniert, aber für ein einfaches Karussell funktioniert das!

0
Luca Di Lenardo

Ich habe hier die beliebteste Antwort ausprobiert, schien aber in einer Endlosschleife hängen zu bleiben. Stattdessen ändere ich zwangsweise die Höhe des Flex-Ansichtsfensters und die Breite der Folie in der Größe des Browsers, was anscheinend den Trick getan hat.

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

        if ($('.flexslider').length > 0) {

            $('.flexslider').each(function () {

                $(this).find('.flex-viewport').css('height', 'auto');

                $(this).find('>.slides').each(function () {
                    let height = $(this).css('height');
                    $(this).find('> li').css('width', height);
                });

            });
        }
    });
0
Friendly Code