0

I am adding a class .flexslider around a div that wraps li tags containing images, my function adds it when the window is less than 767px. The slider A. only works when resized and not on .ready, also when screen scrolls greater than 767px I remove the .flexslider class but the slider still initiates.

  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');
       } 

   }

When Window is 767px or more the HTML code looks like this

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

When Window is 767px or LESS the HTML code looks like this

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

Quick Recap, want the slider to initate if window (mobile devices) screen is LESS than 767px, NOT just on resize, I can review my code and find where i went wrong there most likely, the main issue is DEACTIVATING the slider when window goes back ABOVE 767px.

I run my function inside document.ready window.resize & tried inside window.load Logically I can see where it is not running the way I would like, but I can't figure out what to write to make to function properly.

4

2 回答 2

1

您是否尝试过暂停/播放 flexslider？

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');
  } 
}
于 2013-07-11T08:32:19.910 回答
0

在flexslider的js中

find-> slider.doMath 在非缩小版本中大约 950-960 行

然后在下面添加代码

maxItems 和之前的 slider.w 片段

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

于 2017-05-03T12:08:22.140 回答