4

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

开发站点/演示

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

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

可能有帮助的注意事项：

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

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

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

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

感谢您的帮助

4

2 回答 2

2

Lauren 的修复是详细而完整的（除了已弃用的 $.broswer），但我发现在调整大小时简单地将轮播重置为幻灯片 0 对于响应式设计来说是简单而优雅的。由于测试，在构建站点时很容易关注调整事件的大小，但在现实世界中，人们不会在查看页面时不断调整浏览器的大小，而那些是非常小的边缘情况。所以这是我的解决方案：

$(window).bind("resize", function(){
    $('#flexslider').flexslider(0);
});
于 2015-06-08T16:39:52.133 回答
1

这似乎适用于最新的 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
*/
于 2013-01-08T18:45:23.467 回答