Flex slider - I want to count Carousel Min & Max Items when resize browser

Question

When Resize browser & then after refresh page. so count Carousel Min & Max Items. but When Not count Carousel Min & Max Items without refresh page.

I want to count Carousel Min & Max Items when resize browser.

See Our Site (I have using Carousel flexslider in Featured Item): http://demo.harnishdesign.net/opencart/polishop/

How to fix it?

(function() {

// store the slider in a local variable
var $window = $(window),
flexslider;

// tiny helper function to add breakpoints
function getGridSize() {
return (window.innerWidth < 320) ? 1 :
(window.innerWidth < 600) ? 2 :
(window.innerWidth < 800) ? 3 :
(window.innerWidth < 900) ? 4 : 5;
}

$window.load(function() {
$('#content .featured_carousel').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
itemWidth: 210,
minItems: getGridSize(), // use function to pull in initial value
maxItems: getGridSize() // use function to pull in initial value
});
});

}());

Answer 1

Try something like

(function() {

  // store the slider in a local variable
  var $window = $(window),
      flexslider;

  // tiny helper function to add breakpoints
  function getGridSize() {
    return (window.innerWidth < 600) ? 2 :
           (window.innerWidth < 900) ? 3 : 4;
  }

  $(function() {
    SyntaxHighlighter.all();
  });

  $window.load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 210,
      itemMargin: 5,
      minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize() // use function to pull in initial value
    });
  });

  // check grid size on resize event
  $window.resize(function() {
    var gridSize = getGridSize();

    flexslider.vars.minItems = gridSize;
    flexslider.vars.maxItems = gridSize;
  });
}());