FlexSlider 2在窗口调整大小时的重新调整大小

Question

我正在使用 Twitter Bootstrap 为 WordPress 制作响应式主题。在首页上，我使用了 FlexSlider 幻灯片 jquery 插件。

不幸的是，当我调整浏览器大小时，FlexSlider 的缩放效果并不理想。当我缩小浏览器窗口时，图片可能被裁剪掉；当我扩大窗口时，下一张图片的部分可能会显示在旁边。即使我使用 FlexSlider 网站上的演示代码，这种情况也会发生。而 Dany Duchaine 的 [Energized 主题][3] 可以很好地随着视窗变化而调整 FlexSlider 的大小。有人能解释他是如何做到的，或者提出任何改进我版本行为的建议吗？

谢谢！

- And Finally

---

我们需要一些代码或示例来查看发生了什么。我现在遇到一个问题，就是在Drupal 7上将FlexSlider集成到Twitter Bootstrap主题中。我的图像被调整为奇怪的比例，就像它占据了整个宽度，但高度没有相应地调整。有任何提示都感兴趣。我还在自己尝试中... - MrUpsidown

Answer 1

您可能已经有了解决方案或者已经继续前进，但我想为访客在Github上指出这个问题：https://github.com/woothemes/FlexSlider/issues/391（请注意patbouche的回答）。这个解决方案对我有效。我将它放在after:回调函数中。

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

- byronyasgur

---

谢谢byronyasgur，最终我放弃了，但是这个解决方案看起来会提供一个有效的解决方法。 - And Finally

我想我有完全相同的问题。我应该把你的答案放在我的代码哪里？ $（'.flexslider'）。flexslider（{ 选择器：'.slides > .testimonials-block'， 动画：“slide”， directionNav：false， smoothHeight：true， }）;谢谢！！ - Nesta

我不知道，我很久没用过了 - 我猜大概就在你评论里的那段代码之前吧。 - byronyasgur

不确定为什么，但这似乎对我创建了一个无限循环。如果有帮助的话，我已经将我的解决方案发布为答案。 - Friendly Code

Answer 2

我将几个解决方案结合在一起，并添加了一个检查以确保页面上存在滑块。

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

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

- Jacob Mitchell

Answer 3

为了可靠地使其工作，我不得不绑定窗口调整大小事件。由于FlexSlider的before和after回调对我无效：

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

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

});

- Natacha Beaugeais

---

在最新的flexslider中，我使用了这种方法，结果导致浏览器卡死。window.resize被递归触发。可能是slider.resize()调整了窗口大小，从而触发了window.resize() -- 进入了循环。 - user31782

@user31782 是的，这会导致另一个插件在window.resize()时重新初始化，这现在给我带来了问题，希望我能找到解决方案。 - Stefan

我想通了，你不能将resize();放在全局，因为像user31782所说，这会导致调整大小进入无限循环，并且如果你的custom.js中有window.resize();，它将在其中的函数每次触发时触发。因此，唯一的解决方案是将slider.resize();放在Flexslider的属性中，例如start:、after:、before:等。 - Stefan

Answer 4

我也尝试了很多方法，但都没有真正起作用...然后我手动操作，现在它可以工作了：在窗口调整大小时，在flexslider更改滑块数据之前保存它，销毁flexslider (https://dev59.com/T3HYa4cB1Zd3GeqPMokd#16334046)并完全删除节点，手动添加在数据中保存的原始滑块节点，再次添加并初始化flexslider...因为这相当昂贵，所以我还添加了一个调整大小的方法 (https://dev59.com/0G035IYBdhLWcg3wVeXn#40534918)，以便在调整大小时不执行...是的，这是一些代码，而且有点儿hacky，但它正在工作 :)

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

最好将您的滑块包裹在自己独特的容器中：

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

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

- chakmear

Answer 5

我认为更好的做法是将它放在 before 回调函数中:

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

- Guern

---

你为什么会选择那种方式呢？特别是这样做的原因是什么？ - byronyasgur

因为 before 回调函数在图像出现之前被调用，所以这样你就可以避免看到调整大小的效果。在我看来，在显示之前修改某些东西是最佳实践。 - Guern

它将在每个动画中调用。 - Laxmikant Dange

Answer 6

我想再提供一种解决方案，以防有人仍然遇到“flexslider调整为更高的宽度，但不调整为更低”的问题

用户“PCandtheWeb”建议添加以下内容，以防您有一个包含表格的包装器，这似乎可以解决问题

.your-table
{
   table-layout: fixed
}

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

- Tiago Duarte

---

这里的问题有点不同。创建一个新的SO问题并在那里提供答案会更好吗（除了留在这里，链接也是好的）？ 如果问题是它不能调整到较窄的尺寸，那么这绝对应该是被接受的答案。 - LittleTiger

Answer 7

我尝试了很多方法，然后我做了这个

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

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

- user3365052

Answer 8

我尝试了这里最受欢迎的答案，但似乎陷入了无限循环。相反，我在浏览器调整大小时强制更改了flex-viewport高度和滑动宽度，这似乎解决了问题。

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

            });
        }
    });

- Friendly Code

---

这是帮助我的解决方案。我也遇到了使用.resize()时的无限循环问题。 - Alexander

Answer 9

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

我不确定这个方法适用于所有情况，但对于简单的轮播图它是有效的！

- Luca Di Lenardo