Flexslider 无法正确调整大小

Question

我在我的网站上使用 Flexslider。但是，当我调整屏幕大小时或旋转手机 phone 时，Flexslider 无法正确调整滑块大小。

我看过 Woothemes 的文档，有网格功能，但不是 100% 有效。有人知道为什么吗？

我的 flexslider 函数如下所示：

flexslider = { vars:{} };

startLogos = function(){
    $('.logos .flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 200,
        itemMargin: 20,
        directionNav: true,
        controlNav: false,
        minItems: getGridSize(), // use function to pull in initial value
        maxItems: getGridSize(), // use function to pull in initial value
        start: function(slider){
            flexslider = slider;
        }
    });
};

我的网格是这样的：

getGridSize = function() {
    return (window.innerWidth < 600) ? 1 :
           (window.innerWidth < 768) ? 2 :
           (window.innerWidth < 1024) ? 3 : 4; 
}

我有一个变量：

var $window = $(window)

当然在 $window.load 上我调用了 startLogos 函数，在 $window.resize 上我再次调用它。

当我在 Safari 中的 iPad 上测试它时，它运行良好！一切正常，但在桌面浏览器和 Android 设备上..（grr！）

Answer 1

这很适合我。

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

Flexslider 无法正确调整大小

Flexslider not resizing properly

css

jquery

flexslider