FlexSlider 2 在窗口调整大小时调整大小

Posted 2023-03-06

【中文标题】FlexSlider 2 在窗口调整大小时调整大小

【英文标题】：FlexSlider 2 resizing on window resize

【发布时间】：2012-08-02 20:07:03

【问题描述】：

我正在为基于 Twitter Bootstrap 的 WordPress 制作一个响应式主题。我在主页上使用FlexSlider幻灯片jquery插件。

不幸的是，当我调整浏览器的大小时，FlexSlider 无法正常调整大小。当我变窄时，图像很容易被裁剪掉。如果我变宽，下一张图像的一部分可能会出现在侧面。即使我使用 FlexSlider 网站上的演示代码，也会发生这种情况。它甚至发生在 FlexSlider 演示中。但是 Dany Duchaine 的 [Energized theme][3] 设法随着视口的变化很好地调整 FlexSlider 的大小。任何人都可以解释他是如何做到的，或者建议我可以改进我的版本的行为吗？

谢谢！

【问题讨论】：

我们需要一些代码或示例来看看会发生什么。我现在在 Drupal 7 上的 Twitter Bootstrap 主题中集成 FlexSlider 时遇到问题。我的图像以奇怪的比例调整大小，就像它占用了整个宽度但高度没有相应地调整大小。对任何提示感兴趣。还在我这边努力……

【参考方案1】：

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

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

【讨论】：

感谢 byronyasgur，我最终放弃了，但这个解决方案看起来可以提供有效的解决方法。

我想我也有同样的问题。我会将您的答案放在我的代码中的什么位置？ $('.flexslider').flexslider( selector: '.slides > .testimonials-block', 动画: "slide", directionNav: false, smoothHeight: true, );谢谢！！

我不知道我已经很长时间没有使用它了——我猜可能就在你评论中的代码之前。

不知道为什么，但这似乎给我造成了无限循环。如果它可以帮助任何人，我将我的解决方案作为答案发布

【参考方案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();
    

【参考方案3】：

我必须绑定窗口调整大小事件才能使其可靠地工作。 由于 FlexSlider before 和 after 回调对我不起作用：

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

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

);

【讨论】：

在最新的 flexslider 中我使用了这种方法，它挂起了浏览器。 window.resize 是递归触发的。可能是slider.resize() 调整了触发window.resize() 的窗口大小——它被困在循环中。

@user31782 是的，这会导致另一个插件在window.resize() 中重新初始化，这对我来说是个问题，我希望我能找到解决方案

我想通了，你不能把这个resize(); 当作全局的，因为就像user31782 说的那样，它会导致调整大小进入无限循环，如果你的@ 中有window.resize(); 987654327@ 每次您的功能在其中时都会触发。因此，唯一的解决方案是将slider.resize(); 放入Flexslider 的属性中，例如start:、after:、before: 等

【参考方案4】：

我觉得放在before回调比较好：

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

【讨论】：

你为什么要特别这样做？

因为 before 回调是在图片出现之前调用的，所以这样可以避免看到调整大小的效果。在我看来，先修改一些内容以表明它是最佳实践

它会调用每一个动画。

【参考方案5】：

我也尝试了很多方法，但没有一个真正有效...然后我手动完成了它，现在它可以工作了：在调整窗口大小时保存滑块数据，然后由 flexslider 更改：销毁 flexslider (https://***.com/a/16334046/7334422)并完全删除节点，手动添加保存在数据中的原始滑块节点，再次添加并初始化flexslider ...因为这非常昂贵我还添加了一个调整大小的方法（https://***.com/a/40534918/7334422），以便在调整大小时不执行...是的，它是一些代码，它有点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>

【参考方案6】：

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

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

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

【参考方案7】：

只是想添加另一个替代方案，以防有人仍然遇到 “flexslider 调整到更高宽度，但不是更低”的问题

用户“PCandtheWeb”建议添加以下内容，以防您有一个包装表，这似乎可以完成工作

.your-table

   table-layout: fixed

来源： https://github.com/woothemes/FlexSlider/issues/980

【讨论】：

这里的问题有点不同。创建一个新的 SO 问题并在那里提供答案会更好吗（除了把它留在这里，尽管链接它会很好）？这绝对应该是公认的答案，如果问题是它没有调整到更窄的尺寸。

【参考方案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);
                );

            );
        
    );

【讨论】：

这是帮助我的解决方案。我还用 .resize(); 陷入了无限的混乱；

【参考方案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");
    );
);

我不确定这个是否适用于所有情况，但对于一个简单的轮播来说，它可以工作！