FlexSlider itemWidth не обновляется при изменении размера окна - PullRequest
Новая
       11

FlexSlider itemWidth не обновляется при изменении размера окна

0 голосов
/ 26 октября 2018

Мне нужно реализовать дизайн на изображении ниже.Итак, я вычислил itemWidth динамически в FlexSlider.enter image description here Но он не обновляется при изменении размера окна браузера.Рассчитанная ширина верна, но она не отражена в реальных элементах FlexSlider.Ползунок отображает правильную ширину только после выполнения функции «после».Существуют ли возможные способы обновления FlexSlider после вычисления itemWidth. 

$(document).ready(function() {


 /* store the slider in a local variable */
  var $window = $(window),
    flexslider = {
      vars: {}
    };

  $('.custom_slider').flexslider({
    animation: "slide",
    controlNav: true,
    animationLoop: true,
    slideshow: true,
    directionNav: true,
    itemWidth: getSliderItemWidth(),
    itemMargin: 20,
    customDirectionNav: $(".custom_navigation a"),
    start: function(slider) {
      flexslider = slider;
    },
    after: function(slider) {
      slider.resize();
      /* auto-restart player if paused after action */
      if (!slider.playing) {
        slider.play();
      }
    }
  });

  /* check slider width on resize event */
  $window.resize(function() {
    var sliderItemWidth = getSliderItemWidth();
    flexslider.vars.itemWidth = sliderItemWidth;
  });

  function getSliderItemWidth() {
    var windowWidth = getWidth(),
      desktopSliderWidth = (windowWidth / 2) - 70,
      sliderItemWidth = (windowWidth > 768) ? desktopSliderWidth : windowWidth;
    return sliderItemWidth;
  }

});

Fiddle Link: https://jsfiddle.net/elizabethkmathew/kn0ojsh9/

...