Flexslider 2 Resizing On Window Resize

I'm making a responsive theme for WordPress built on Twitter Bootstrap. I'm using the FlexSlider slideshow jquery plugin on the homepage. Unfortunately, when I resize my browser, F

Solution 1:

You probably have a solution or have moved on at this stage but I thought I'd point out this issue on github for visitors: https://github.com/woothemes/FlexSlider/issues/391 (note patbouche's answer). This solution worked for me. I put it in the after: callback.

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

Solution 2:

I combined a couple of these solutions and also added a check to make sure the slider existed on the page first.

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

functionflexsliderResize(){ 
    if ($('.flexslider').length > 0) {
        $('.flexslider').data('flexslider').resize();
    }
}

Solution 3:

I had to bind the window resize event in order to get this working reliably. Since the FlexSlider before and after callbacks did not work for me:

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

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

});

Solution 4:

I think it is better to put it into before callback:

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

Solution 5:

I've also tried many ways but none where really working... Then I did it manually, and it works now: Save the slider data before changed by flexslider, when window is resizing: destroy flexslider (https://stackoverflow.com/a/16334046/7334422) and delete node completely, manually add original slider node that was saved in data, add it again and initialize flexslider... because this is quite expensive I also added a resized method (https://stackoverflow.com/a/40534918/7334422), in order to not being executed while resizing... Yes it is some code and it's a bit hacky, but it's working :)

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

functionmyFlexInit(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);

You better wrap your slider in an own unique container:

<divclass="sliderparent"><divclass="flexslider"><ulclass="slides"></ul></div></div>