javascript - 窗口调整活动大小并禁用不同宽度的滑块

Question

代码：

$(function() {
     var win = $(window);

     resizeHandler();

     win.resize(resizeHandler);
     var fired = false;

     function resizeHandler() {
     if (win.width() <= 991 && !fired) {
     $('.element').unslider();
        fired = true;
     } else if (win.width() >= 992) {
        slider.unslider('destroy');
     }
   }
});

所以我希望滑块在低于 991px 时工作，在高于 991 像素时停止工作。所有在调整大小但现在刷新时高于 991 的滑块永远不会出现，当刷新低于 991 时滑块不会在超过 991px 时消失？

如果有一些输入或向我推荐一个可以禁用某些宽度的滑块库会很好吗？

提前致谢。

Answer 1

快速解决方案：只需删除使用我的 unslider 的类（如“unslider-wrap unslider-carousel”）。以下代码已使用 unslider 演示测试

$(function() {
     var win = $(window),
         mySlider = $(".my-slider");

     resizeHandler();

     win.resize(resizeHandler);

   function resizeHandler() {
     if (win.width() <= 991) {
        mySlider .addClass ("unslider-wrap unslider-carousel");
     } else if (win.width() >= 992) {
        mySlider.removeClass ("unslider-wrap unslider-carousel");
     }
   }
});

<div class="default-slider unslider-horizontal">
    <ul class="my-slider unslider-wrap unslider-carousel">
        <li>Slide 1</li>
        <li class="unslider-active">Slide 2</li>
        <li class="">Slide 3</li>
        <li class="">Slide 4</li>
    </ul>
</div>