如何删除手机上的光滑幻灯片? [英] How to remove slick slide on mobile?

问题描述

我在项目上使用了很棒的 Slick 幻灯片.

I'm using the awesome Slick slide on a project.

问题是:我有一个带5格的旋转木马.4张图像和一个视频.

The problem is: I have a carousel with 5 divs inside. 4 images and a video.

在移动设备上(小于768像素)，我希望滑块仅显示图像，而不显示视频.我试图通过CSS隐藏视频div，但这是行不通的.

On mobile (< 768px) I want the slider to show only the images, not the video. I tried to hide the video div by css but that's not working.

关于如何执行此操作的任何想法?有人以前有这种需要吗?

Any ideas on how to do this? Anyone had this need before?

推荐答案

查看« Filtering»在 Slick的文档中进行了演示.让我们用它来解决问题.

Look at the «Filtering» demo at the Slick's documentation. Let's use it to solve the issue.

1. 使用响应选项设置所需的断点.
2. 捕获 breakpoint 事件并读取轮播的 activeBreakpoint 属性.注意:当屏幕宽度大于最后一个断点时，此属性将返回 null .

3. 致电 slickFilter 和 slickUnfilter 方法:

1. Set breakpoints that you need, using the responsive option.
2. Catch the breakpoint event and read the activeBreakpoint property of the carousel. Notabene: when the screen width is greater than the last of the breakpoints, this property returns null.

3. Call slickFilter and slickUnfilter methods:

slickFilter
参数 filter :选择器或函数
使用 jQuery .filter 语法

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

slickUnfilter
删除应用的过滤器

slickUnfilter
Removes applied filter

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

Beware of an infinite loop: these methods cause a re-initialization of the slider, during which the breakpoint event again occurs (unless the breakpoint is null).

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

Check the result: https://codepen.io/glebkema/pen/NaGGzv
Slides with the .hide-on-mobile class become hidden when the screen width is 700px or less.

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="//placehold.it/900x300/c69/f9c/?text=1" alt="">
  </div>
  <div class="hide-on-mobile">
    <img src="//placehold.it/900x300/9c6/cf9/?text=2" alt="">
  </div>
  <div class="hide-on-mobile">
    <img src="//placehold.it/900x300/69c/9cf/?text=3" alt="">
  </div>
  <div>
    <img src="//placehold.it/900x300/c33/f66/?text=4" alt="">
  </div>
  <div class="hide-on-mobile">
    <img src="//placehold.it/900x300/099/3cc/?text=5" alt="">
  </div>
  <div>
    <img src="//placehold.it/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>

这篇关于如何删除手机上的光滑幻灯片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！