Javascript 向FlexSlider添加断点

我正在使用FlexSlider创建一个响应库，使用来自的一些说明。我真的想知道是否有一种方法可以使用断点来设置变量1、2、3等，而不是重复一堆代码。唯一随断点而改变的设置是“minItems”和“maxtems”，再次设置所有设置似乎很愚蠢。因此，基本上只是尝试清理JavaScript并使其更加简洁

FlexSlider：

HTML

JavaScript

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

/* 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'; }
}

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