Question

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

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

在手机上（＆lt; 768px）我希望滑块只显示图像，而不是视频。我试图用css隐藏视频div，但这不起作用。

关于如何做到这一点的任何想法？以前有人有此需要吗？

Answer 1

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

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

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

Answer 2

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

使用responsive选项设置所需的断点。
抓住breakpoint事件并阅读轮播的activeBreakpoint属性。 Notabene：当屏幕宽度大于最后一个断点时，此属性返回null。
致电slickFilter and slickUnfilter methods：


<强> slickFilter
  参数filter：选择器或功能
  使用jQuery .filter syntax
过滤幻灯片
<强> slickUnfilter
  删除已应用的过滤器
注意无限循环：这些方法会导致重新初始化滑块，在此期间再次发生breakpoint事件（除非断点为null）。
也在初始化期间调用这些方法。不要忘记在初始化之前定义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="//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>

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
  ]
});

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

3 个答案: