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

时间:2013-06-18 07:14:21

标签: jquery reload flexslider

我在包含图片的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中尝试过 从逻辑上讲,我可以看到它没有以我想要的方式运行,但我无法弄清楚要写什么才能使其正常运行。

2 个答案:

答案 0 :(得分: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');
  } 
}

答案 1 :(得分:0)

在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;
                }