Flexslider 项目在调整大小时消失

Question

我已将 flexslider 设置为流体宽度网站的产品轮播。当浏览器窗口打开到一定宽度时，产品项目有时会消失。详情如下：

Dev Site / Demo

这是关于名为“热门产品”的中心框。以下是在我测试过的所有浏览器（FF、IE、Chrome、Safari）中复制我遇到的问题的方法

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

可能有帮助的注意事项：

• 如果您不在轮播中的最后一项并调整大小，它可以正常工作，并且可以根据需要进行拉伸

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

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

• flexslider 的所有演示都只是图像......我还没有看到有人像我一样使用它在每个项目中显示 html，我也不知道它是否被设计为允许这样做。希望如果其他人也在做 html/multi-items insde flexslider，这将是他们已经看到的东西，或者如果我们解决它可以帮助他们。

感谢您的帮助

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
*/