Question

我在包含图片的li标签的div周围添加了一个.flexslider类，我的函数在窗口小于767px时添加它。滑块A.仅在调整大小时才有效，而不是.ready，当屏幕滚动大于767px时，我移除.flexslider类但滑块仍然启动。

  function bannerSlider() {
     "use strict";
      if ($(window).width() < 767) {              
           $("#activate-slider").addClass('flexslider');
           $("#activate-slider > ul").addClass('slides');   
       } else if ($Query(window).width() > 767) {       
           $("#activate-slider").removeClass('flexslider');
           $("#activate-slider > ul").removeClass('slides');
       } 

   }

当Window为767px或更高时，HTML代码如下所示

       <div id="activate-slider">
          <ul>  
          <li>myimage</li>
          <li>myimage</li>
          </ul>
        </div>

当Window为767px或LESS时，HTML代码如下所示

       <div id="activate-slider" class="flexslider">
          <ul class="slides">   
          <li>myimage</li>
          <li>myimage</li>
          </ul>
        </div>

快速回顾一下，如果窗口（移动设备）屏幕低于767px，则希望滑块启动，而不仅仅是调整大小，我可以查看我的代码并找到我最有可能出错的地方，主要问题是停用滑块当窗口回到767px以上时。

我在document.ready window.resize＆amp;中运行我的函数。在window.load中尝试过从逻辑上讲，我可以看到它没有以我想要的方式运行，但我无法弄清楚要写什么才能使其正常运行。

Answer 1

您是否尝试暂停/播放弹性滑板？

function bannerSlider() {
  "use strict";
  if ($(window).width() <= 767) {              

       $("#activate-slider").addClass('flexslider');
       $("#activate-slider > ul").addClass('slides'); 

       if ( $('.flexslider').flexslider('animating') == false ) {
          $('.flexslider').flexslider('play') ; 
       }

  } 
  else if ($Query(window).width() > 767) {       

       if ( $('.flexslider').flexslider('animating') == true ) {
          $('.flexslider').flexslider('pause') ;
       }

       $("#activate-slider").removeClass('flexslider');
       $("#activate-slider > ul").removeClass('slides');
  } 
}

Answer 2

在flexslider的js中

find-＆GT; slider.doMath大约950-960行没有缩小版本

然后在

下面添加代码

maxItems和在slider.w之前 snipet

 var w = $(window).width();
                var h = $(window).height();
                console.log("w " + w);
                console.log("h " + h);
                if (w > 1025) {
                    maxItems = slider.vars.maxItems;
                }
                else if (w = 1020) {
                    maxItems = 3;
                }
                else if (w >= 568) {
                    maxItems = 2;
                }
                else if (568 > w) {
                    maxItems = 1;
                }

在重新调整大小时重新加载.flexslider

2 个答案: