Flexslider项目在调整大小时消失

Question

我已经为一个流体宽度的站点设置了一个flexslider作为产品转盘。当浏览器窗口打开到一定宽度时，产品项目有时会消失。详细信息如下：

开发站点/演示

这是关于名为"流行产品"的中心框。以下是如何在我测试过的所有浏览器（FF、IE、Chrome、Safari）中复制我遇到的问题

1. 关闭浏览器窗口，直到只显示4或5个项目
2. 单击向右箭头，直到显示最后一款产品（目前是pro mate黑色袖子）
3. 现在，将浏览器窗口调整得更宽，产品就会在某个时刻消失。再缩小一点，它们就会重新出现

可能有帮助的说明：

• 如果你不在转盘中的最后一个项目并调整大小，它会很好地工作，事情会根据需要扩展

• 如果浏览器很宽，并且最多显示6个产品，并且你转到转盘中的最后一个项目，然后再次调整大小，它也可以正常工作（所以只有当转盘宽度很小时，它才会在转到最后一个项时中断，然后变大）

• 对于滑块配置，我设置了minItems为4，maxItems为6。

• flexslider的所有演示都只是图像。。。我还没有见过有人像我一样用它在每个项目中显示html，我也不知道它是否被设计成允许这样做。希望如果其他人也在flexslider中做html/多项目，这将是他们看到的，或者如果我们解决了这个问题，这可能会对他们有所帮助

感谢您的帮助

Answer 1

Lauren的修复是详细而完整的（除了不推荐使用的$.broswer），但我发现，对于响应式设计来说，简单地将转盘重置为调整大小时的滑动0是简单而优雅的。由于测试的原因，在构建网站时很容易将注意力集中在调整大小事件上，但在现实世界中，人们在查看页面时并不会不断调整浏览器的大小，而那些调整大小的事件是一个非常小的边缘情况。这就是我的解决方案：

$(window).bind("resize", function(){
    $('#flexslider').flexslider(0);
});

Answer 2

这似乎适用于最新的Chrome、Safari、Firefox和IE，但它很混乱（主要是因为我在Chrome、Safari和Firefox中使用了它，然后意识到IE9仍然在让元素消失）：

/*
 * Flexslider BUG FIX:
 *   Summary: on window resize, ensure team scrollbar members are all visible
 *   Dependency: Flexslider v2.1 and its dependencies
 */
$(window).bind("resize", function(){
    //doesnt work well in IEs, so detect these browsers
    //var isIE9 = ($.browser.version == "9.0") && ($.browser.msie == true);
    var isIE = $.browser.msie == true;
    var tmpCurrentItem = $('#team').flexslider().data().flexslider.currentItem;
    // if current item isnt the 1st one, then resizing may mean that images will disappear
    if (tmpCurrentItem != 0) {
       // sometimes passing a number into flexslider doesn't work and returns nothing
       // in these instances, move to 0
       //if NOT IE
       if (isIE != true) {
         var tmpFlexValue = $('#team').flexslider(tmpCurrentItem);
         if (tmpFlexValue == undefined) {
            $('#team').flexslider(0);
         }
       }
       var tmpCurrentSlide = $('#team').flexslider().data().flexslider.currentSlide;
       var tmpPages = $('#team').flexslider().data().flexslider.pagingCount;
       //if IE
       //slide number (not item number) should ALWAYS be less than paging Count
       //otherwise, it needs to be reset to 0
       if (isIE == true){
          if (tmpCurrentSlide >= tmpPages) {
                $('#team').flexslider(0); //this triggers another resize event
           }
       }
    }
});
/* end flexslider bug fix
*/