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!

We would need some code or an example to see what happens. I am having an issue right now integrating FlexSlider in a Twitter Bootstrap theme on Drupal 7. My images are resized with a strange ratio, like it's taking the full width but the height is not resized accordingly. Interested in any tip. Still trying on my side... — MrUpsidown, Nov 22 '12 at 11:02

score 17 · Accepted Answer · edited Feb 18 '13 at 10:36

17

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

edited Feb 18 '13 at 10:36

Guern

1,237
1
12
30

answered Feb 16 '13 at 14:50

byronyasgur

4,627
13
52
96

Thanks byronyasgur, I gave up in the end but this solution looks like it would've provided an effective workaround. – And Finally Feb 16 '13 at 17:12
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!! – Nesta Jun 06 '15 at 18:37
I don't know I haven't used this in a long time - I guess right before that code in your comment probably. – byronyasgur Jun 08 '15 at 13:06
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 – Friendly Code May 15 '19 at 08:06

score 4 · Answer 2 · answered Jul 13 '15 at 18:45

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

score 3 · Answer 3 · answered Jul 24 '13 at 12:20

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

});

answered Jul 24 '13 at 12:20

Natacha Beaugeais

1,003
1
11
24

1

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. – user31782 Dec 31 '16 at 13:30
@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 Mar 03 '17 at 11:31
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 – Stefan Mar 03 '17 at 12:16

score 2 · Answer 4 · answered Feb 18 '13 at 10:34

2

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

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

answered Feb 18 '13 at 10:34

Guern

1,237
1
12
30

1

why would you do it that way particularly? – byronyasgur Feb 18 '13 at 13:28
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 – Guern Feb 18 '13 at 13:45
1

It will call on every animation. – Laxmikant Dange Dec 04 '14 at 14:21

score 2 · Answer 5 · answered Oct 20 '17 at 10:10

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>

score 1 · Answer 6 · answered Feb 28 '14 at 13:57

1

I tried many way, then I did this

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

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

answered Feb 28 '14 at 13:57

user3365052

11
1

score 1 · Answer 7 · answered Nov 16 '15 at 13:54

1

just wanted to add yet another alternative in case someone is still experiencing the "flexslider resizes to higher width, but not lower" problem

user "PCandtheWeb" suggested adding the below in case you have a wrapping table, which appears to get the job done

.your-table
{
   table-layout: fixed
}

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

answered Nov 16 '15 at 13:54

Tiago Duarte

3,244
3
23
29

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**. – LittleTiger Sep 26 '16 at 05:35

score 1 · Answer 8 · answered May 15 '19 at 08:08

I tried the most popular answer here but seemed to get stuck in an endless loop. I instead force change the flex-viewport height and slide width on browser resize which seems to have done the trick.

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

            });
        }
    });

This is the solution that helped me. I also stucked in infinite lood with .resize(); — Alexander, Apr 24 '21 at 03:11

Luca Di Lenardo · Answer 9 · 2017-09-09T09:44:21.460

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

I'm not sure this one will work for all cases, but for a simple carousel this works!

FlexSlider 2 resizing on window resize

9 Answers9

Linked