Question

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

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

关闭浏览器窗口，直到只显示4或5个项目
单击向右箭头，直到显示最后一个产品（目前是合作黑色袖子）
现在，调整浏览器窗口更宽的大小，产品会在某个时刻消失。再次变小，然后重新出现。

备注可能有所帮助：

如果您不在旋转木马的最后一个项目并调整大小，它可以正常工作并根据需要拉伸
如果浏览器很宽并且显示最多6个产品并且你转到旋转木马中的最后一个项目，那么再次调整大小，它也可以正常工作（所以它只会在你去的时候中断旋转木马宽度小的最后一项，然后变大）
对于滑块配置，我设置了minItems为4，maxItems为6。
flexslider的所有演示都只是图片......我没有看到有人用它来像我一样在每个项目中显示html，也不知道它是否设计为允许这样做。希望如果其他人也在使用hs / 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
*/

Flexslider项目在调整大小时消失

2 个答案: