### Carousel With Dynamic Min & Max Ranges

- JS
- HTML

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

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

                <!-- Place somewhere in the <body> of your page -->
                <div class="flexslider carousel">
                  <ul class="slides">
                    <li>
                      <img src="slide1.jpg" />
                    </li>
                    <li>
                      <img src="slide2.jpg" />
                    </li>
                    <li>
                      <img src="slide3.jpg" />
                    </li>
                    <li>
                      <img src="slide4.jpg" />
                    </li>
                    <!-- items mirrored twice, total of 12 -->
                  </ul>
                </div>