Flexslider не имеет правильного размера

Question

Я использую Flexslider на своем веб-сайте. Но когда я изменяю размер экрана или поворачиваю свой мобильный телефон, 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) 

Конечно на $ окна. load Я вызываю функцию startLogos и в $ window.resize я вызываю ее снова.

Когда я тестирую это на iPad в Safari, он отлично работает! Все работает отлично, но на настольном браузере и устройстве Android. (Grr!)

Answer 1

Это работает идеально для меня.

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

Answer 2

не работают на этой странице - https://findexpert.es/events/spain/catalonia/girona/events-in-spain/festival-cvetov-v-girone/ ...

jQuery('#geodir_slider').data('flexslider').resize()