FlexSlider 2 resizing on window resize

user_678834 0
Viewed 26772

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!

responsive-design twitter-bootstrap css jquery javascript
9 Answers

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>
user_73344220

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

            });
        }
    });
user_9865470
Related