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

Question

我正在使用很棒的 Slick在元素上滑动。

问题是:我有一个内部有 5 个 div 的旋转木马。 4 张图片和一个视频。

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

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

Answer 1

查看 Slick's documentation 中的“过滤”演示.让我们用它来解决问题。

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

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

3. 调用slickFilter and slickUnfilter methods :

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

   slickUnfilter
   Removes applied filter

4. 谨防无限循环:这些方法会导致 slider 重新初始化，在此期间 breakpoint 事件再次发生(除非断点为 null ).

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

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

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>