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