### Carousel With Min & Max Ranges

- JS
- HTML

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

                  });

                }());

                <!-- Place somewhere in the <body> of your page -->

                <div class="flexslider">

                  <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>