Question

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

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

谢谢！

Answer 1

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

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

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

Answer 3

我必须绑定窗口调整大小事件才能使其正常工作。由于之前的之前的以及之后的对我来说不起作用：

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

Answer 4

我认为最好将其置于之前回调：

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

Answer 5

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

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

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

Answer 6

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

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

.your-table
{
   table-layout: fixed
}

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

Answer 7

我也试过很多方法，但没有真正有效的方法......然后我手动完成了它现在可以正常工作：当窗口调整大小时，在flexslider更改之前保存滑块数据：destroy flexslider（{{3} }）并完全删除节点，手动添加保存在数据中的原始滑块节点，再次添加并初始化flexslider ...因为这非常昂贵我还添加了一个调整大小的方法（https://stackoverflow.com/a/16334046/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>

Answer 8

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

我不确定这个会适用于所有情况，但是对于一个简单的旋转木马来说这是有效的！

Answer 9

我在这里尝试了最流行的答案，但似乎陷入了无休止的循环。我改为在浏览器调整大小时强制更改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);
                });

            });
        }
    });

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

9 个答案: