Why does Flex slider not work with min-max dynamic range?

Question

I want to show 3 thumbnails in mobile and 4 in desktop in flex slider. For that I am using Carousel with dynamic min/max ranges version of flex slider. If you resize that page you'd see number of thmubanils changing as per browser window width. But when I use use the same code in my website or jsfiddle or anywhere it doesn't work. Here is the jsfiddle proof and same code here:

(function() {

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

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


  $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;
  });
}());

.container {
  width: 70%;
  max-width: 1100px;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" rel="stylesheet" />

<div class="container">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
      </li>
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
      </li>
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
      </li>
      <li>
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
      </li>
      <!-- items mirrored twice, total of 12 -->
    </ul>
  </div>

I am thinking to report this as an issue on github but I am wary as to why then it works on actual flex slider website.

Answer 1

Here is the working example for min-max dynamic range.

    var $window = jQuery(window),
    flexslider = {
        vars: {}
    };
    
    function getGridSize() {
            return (window.innerWidth <= 767) ? 2 : (window.innerWidth <= 900) ? 2 : (window.innerWidth <= 1024) ? 3 : (window.innerWidth > 1025) ? 5 : 5;
}

$window.ready(function() {
        jQuery('.flexslider').flexslider({
            animation: "slide",
            slideshow: false,
            itemWidth: 248,
            itemMargin: 5,      
            minItems: 2,
            maxItems: getGridSize(),
            controlNav: false
        });

Answer 2

It's strange that the official doc of this slider missing this crucial information. You have to set instance of slider to flexslider global variable when it's started or loaded.

Working example.

 (function() {

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

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

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

        // check grid size on resize event
        $window.resize(function() {
            var gridSize = getGridSize();
            flexslider.vars.minItems = gridSize;
            flexslider.vars.maxItems = gridSize;
        });
        
    }());

.container {
  width: 70%;
  max-width: 1100px;
  margin: auto;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
	</div>
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" rel="stylesheet" />

</body>
</html>