javascript - 可以根据浏览器大小使 slider 响应吗？

Question

Jsfiddle DEMO

HTML

    <section class="wrap row">
  <div class="container">
     <div class="slider">
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2 ">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2 ">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
      </div>
      <div class="col-xs-4 col-sm-4 col-lg-2">
        <img src="http://www.clker.com/cliparts/f/5/6/f/1352194206656819167small_ragdoll_kitten-md.png" />
    </div>
  </div>
  </div>
</section>

JQuery

$('.slider').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 9,
   adaptiveHeight: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 2
      }
    }
  ]
});

slickjs 按预期工作，但我找不到在笔记本电脑和台式机尺寸中禁用 slick 的方法。如何在笔记本电脑和台式机尺寸下禁用 slick？

此外，在移动尺寸时，如何启用 slick 并在每张幻灯片的 2 行中显示 9 个缩略图(9 x 2 幻灯片)(不是一个幻灯片行包含所有 18 个缩略图)？认为增加高度会有帮助，但显然没有。

感谢帮助。

Answer 1

您可以使用 enquire.js对于更高级的响应位，您可以在其中记忆起您的 slickJS带有您想要的选项的轮播:

enquire.register("(max-width: 768px)", {

  match : function() {
    $('.slider').slick({ /* your options for smaller screens than 768px */ });
  },      


  unmatch : function() {
    $('.slider').slick({ /* your options for bigger screens than 768px */ });
  }

});

在本例中，您会想起移动设备上的 slider ，其max-width 为768px。你必须输入你的选项，你想要多少张幻灯片，例如:

$('.slider').slick({
    slidesToShow: 4,
    slidesToScroll: 4
});

希望这对您有所帮助!