如何在手机上删除Slick Slide？

Question

我正在一个项目中使用很棒的Slick轮播插件。问题是：我有一个包含5个div的轮播，其中4个是图片，1个是视频。

在移动端（小于768px），我想让轮播只显示图片，而不是视频。我尝试通过css隐藏视频div，但没起作用。

你有什么好的解决办法吗？之前有人遇到过这样的需求吗？

- cassiocardoso

Answer 1

请查看Slick文档中的“过滤”演示。让我们使用它来解决这个问题。

1. 使用 responsive 选项设置所需的断点。

2. 捕获 breakpoint 事件并读取轮播图的 activeBreakpoint 属性。注意：当屏幕宽度大于最后一个断点时，此属性返回 null。

3. 调用 slickFilter 和 slickUnfilter 方法：

   slickFilter
   参数 filter：选择器或函数
   使用 jQuery .filter 语法 过滤幻灯片

   slickUnfilter
   移除应用的过滤器

4. 注意无限循环问题：这些方法会导致幻灯片重新初始化，期间会再次发生 breakpoint 事件（除非断点为 null）。

5. 在初始化期间也要调用这些方法。不要忘记在初始化之前定义 init 处理程序。

查看结果：https://codepen.io/glebkema/pen/NaGGzv
具有.hide-on-mobile类的幻灯片在屏幕宽度小于700px时变为隐藏状态。

var breakpointMobile = 700,
    isChanging = false,
    isFiltered = false;
$('#breakpointMobile').text( breakpointMobile );

$('#myCarousel').on('init breakpoint', function(event, slick){  /** 2. and 5. **/
  if ( ! isChanging ) {                                         /** 4. **/
    $('#breakpointValue').text( String(slick.activeBreakpoint) );
    isChanging = true;
    if ( slick.activeBreakpoint && slick.activeBreakpoint <= breakpointMobile) {
      if ( ! isFiltered ) {
        slick.slickFilter(':not(.hide-on-mobile)');             /** 3. **/
        isFiltered = true;
      }
    } else {
      if ( isFiltered ) {
        slick.slickUnfilter();
        isFiltered = false;
      }
    }
    isChanging = false;
  }
}).slick({
  autoplay: true,
  dots: true,
  responsive: [                                                 /** 1. **/
    { breakpoint: 500 },
    { breakpoint: 700 },
    { breakpoint: 900 }
  ]
});

body {                                                          /** Decorations **/
  font-family: 'Open Sans', sans-serif;
}
.my-carousel img {
  width: 100%;
}
.my-carousel .slick-next {
  right: 15px;
}
.my-carousel .slick-prev {
  left: 15px;
  z-index: 1;
}

<h3>Slides 2, 3 and 5 become hidden when the screen width is&nbsp;<span id="breakpointMobile"></span>px or&nbsp;less</h3>
<p>Active breakpoint is <b id="breakpointValue"></b>. Try to resize the workspace.</p>

<div id="myCarousel" class="my-carousel">
  <div>
    <img src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
  </div>
  <div class="hide-on-mobile">
    <img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
  </div>
  <div class="hide-on-mobile">
    <img src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt="">
  </div>
  <div>
    <img src="https://via.placeholder.com/900x300/c33/f66/?text=4" alt="">
  </div>
  <div class="hide-on-mobile">
    <img src="https://via.placeholder.com/900x300/099/3cc/?text=5" alt="">
  </div>
  <div>
    <img src="https://via.placeholder.com/900x300/f93/fc6/?text=6" alt="">
  </div>
</div>

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>

- Gleb Kemarsky

Answer 2

Slick有一个方法slickRemove（您需要向下滚动一点）：

按索引删除幻灯片。如果设置了removeBefore为true，则删除索引前面的幻灯片，或者如果没有指定索引，则删除第一张幻灯片。如果将removeBefore设置为false，则删除索引后面的幻灯片，或者如果未设置索引，则删除最后一张幻灯片。

如果当前屏幕尺寸小于768px，我只需调用此方法并删除视频幻灯片即可。

- Daniel Schmidt

Answer 3

现在您可以通过添加以下内容，在给定的断点处取消轮播：

settings: "unslick"

使用设置对象的替代方法

要在移动视图上删除Slick滑块，请将上面的代码片段添加到响应式断点中，如下所示

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: "unslick"
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

- susindu