如何去除手机上的光滑幻灯片？

Question

我正在项目中使用很棒的 Slick 幻灯片。

问题是：我有一个旋转木马，里面有 5 divs。 4 张图片和一个视频。

在移动设备上（< 768 像素）我希望滑块仅显示图像，而不显示视频。我试图通过 css 隐藏视频 div，但这不起作用。

关于如何做到这一点有什么想法吗？有人有过这种需求吗？

Answer 1

Slick 有方法 slickRemove（你必须向下滚动一点）：

Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.

如果您当前的屏幕尺寸小于 768px，我会调用此方法并删除包含视频的幻灯片。

Answer 2

查看 Slick's documentation 中的 «Filtering» 演示。让我们用它来解决问题。

使用 responsive 选项设置您需要的断点。
捕捉 breakpoint 事件并阅读轮播的 activeBreakpoint 属性。注意事项：当屏幕宽度大于最后一个断点时，此属性 returns null.
致电slickFilter and slickUnfilter methods:

slickFilter
Argument filter: selector or function
Filters slides using jQuery .filter syntax

slickUnfilter
Removes applied filter
当心无限循环：这些方法会导致滑块重新初始化，在此期间 breakpoint 事件再次发生（除非断点是 null）。
在初始化期间也调用这些方法。不要忘记在初始化之前定义 init 处理程序。

查看结果：https://codepen.io/glebkema/pen/NaGGzv
当屏幕宽度为 700px 或更小时，带有 .hide-on-mobile class 的幻灯片将隐藏。

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>

Answer 3

您现在可以在给定的断点处添加：

settings: "unslick"

而不是设置对象

要删除移动视图上的光滑滑块，请像这样将上面的代码片段添加到响应断点

$('.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
  ]
});

如何去除手机上的光滑幻灯片？

How to remove slick slide on mobile?

javascript

css

slick.js