向FlexSlider添加断点

Question

我正在使用FlexSlider使用this site中的一些指令创建响应式图库。我真的只是想知道是否有办法使用断点来设置变量（1,2,3等）而不是复制一堆代码。使用断点更改的唯一设置是'minItems'和'maxItems'，再次设置所有内容似乎很愚蠢。所以，基本上只是试图清理JavaScript并使其更简洁。

FlexSlider：http://www.woothemes.com/flexslider/

HTML

<div class="flexslider-container">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <img src="image1.jpg" />
      </li>
      <li>
        <img src="image2.jpg" />
      </li>
      <li>
        <img src="image3.jpg" />
      </li>
      <li>
        <img src="image4.jpg" />
      </li>
    </ul>
  </div>
</div>

CSS

/* breakpoint_1 */
body:after { display: none; content: 'breakpoint_1'; }
.flexslider { max-width: 1080px; margin : 0 auto; }

/* breakpoint_2 */
@media all and (min-width: 480px) {
body:after { display: none; content: 'breakpoint_2'; }
}
/* breakpoint_3 */
@media all and (min-width: 720px) {
body:after { display: none; content: 'breakpoint_3'; }
}

的JavaScript

$(document).ready(function(){
  var currentBreakpoint;
  var didResize  = true;
  var raw_slider = $(".flexslider").html();

  $(window).resize(function() {
    didResize = true;
  });

  setInterval(function() {
    if(didResize) {
      didResize = false;

      var newBreakpoint = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

      newBreakpoint = newBreakpoint.replace(/"/g, "");
      newBreakpoint = newBreakpoint.replace(/'/g, "");

      if (currentBreakpoint != newBreakpoint) {

        $(".flexslider").remove();

        $(".flexslider-container").append("<div class='flexslider'></div>");
        $(".flexslider").html(raw_slider);

        if (newBreakpoint === 'breakpoint_1') {
          currentBreakpoint = 'breakpoint_1';

          $(".flexslider").flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 360,
            itemMargin: 0,
            minItems: 1,
            maxItems: 1,
            controlNav: false
          });
        }
        if (newBreakpoint === 'breakpoint_2') {
          currentBreakpoint = 'breakpoint_2';

          $(".flexslider").flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 360,
            itemMargin: 0,
            minItems: 2,
            maxItems: 2,
            controlNav: false
          });
        }
        if (newBreakpoint === 'breakpoint_3') {
          currentBreakpoint = 'breakpoint_3';

          $(".flexslider").flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 360,
            itemMargin: 0,
            minItems: 3,
            maxItems: 3,
            controlNav: false
          });
        }
      }
    }
  }, 250);
});