FlexSlider 2 resizing on window resize

Question

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, FlexSlider doesn't resize gracefully. When I go narrower, the image is liable to get cropped off.. if I go wider, part of the next image can appear to the side. This happens even when I use the demo code from the FlexSlider website. It even happens on the FlexSlider demo. But Dany Duchaine's [Energized theme][3] manages to resize FlexSlider nicely as the viewport changes. Can anyone explain how he's doing it, or suggest any way I can improve the behaviour of my version?

Thanks!

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

function flexsliderResize(){ 
    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'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));
    });
};

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

You better wrap your slider in an own unique container:

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

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

Solution 5

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

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

View more solutions

Comments

[And Finally]

Thanks byronyasgur, I gave up in the end but this solution looks like it would've provided an effective workaround.

[byronyasgur]

why would you do it that way particularly?

[Guern]

Because the before callback is called before that your image appear, so this way you can avoid to see resizing effects. In my opinion modify something before to show it is the best practice

[Laxmikant Dange]

It will call on every animation.

[Nesta]

I guess I have the exact same problem. Where would I put your answer in my code? $('.flexslider').flexslider({ selector: '.slides > .testimonials-block', animation: "slide", directionNav: false, smoothHeight: true, }); Thanks!!

[byronyasgur]

I don't know I haven't used this in a long time - I guess right before that code in your comment probably.

[LittleTiger]

The problem here is a bit different. Would it be better to create a new SO question and provide the answer there (in addition to leaving it here, although linking it would be good) ? This should definitely be the accepted answer, IF the problem is that it doesn't resize to narrower sizes.

[user31782]

In the latest flexslider I used this method and it hanged the browser. The window.resize is triggered recursively. May be the slider.resize() resizes the window which triggers the window.resize() -- and it's caught in the loop.

[Stefan]

@user31782 Yes, this cause another plugin to reInit when it is in window.resize() and that is making problem to me now, i hope i will find solution

[Stefan]

I figure it out, you CAN NOT put this resize(); as global, because, like user31782 said, it will cause resize to be in infinite loop, and if you have window.resize(); in your custom.js it will trigger every time your functions that are in it. So only solution for this is to put slider.resize(); in Property's for Flexslider like start:, after:, before: etc

[Friendly Code]

Not sure why but this seemed to create an endless loop for me. In case it helps anyone I have posted my solution as an answer

[Alexander]

This is the solution that helped me. I also stucked in infinite lood with .resize();