Question

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按预期工作，但我找不到一种方法来禁用笔记本电脑和桌面尺寸的光滑。如何在笔记本电脑和台式机尺寸下禁用光滑？

此外，在移动尺寸时，如何启用光滑并且还会在每个幻灯片（9 x 2幻灯片）中显示2行中的9个缩略图（不是所有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 */ });
  }

});

在此示例中，您可以使用max-width 768px来调用移动设备上的滑块。你必须把你的选项放在你想要的幻灯片中，例如：

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

希望这有帮助！

可以根据浏览器大小使滑块响应？

1 个答案: