Slick slider - 如何从滑块中排除某些 div？

Question

我正在使用来自 https://kenwheeler.github.io/slick/ 的光滑滑块，总体来说这是一个相当不错的滑块。有没有办法只滑动整个 slick-initialized div 内的某些 div-s？换句话说，这是一个示例结构：

<div class="sliderdiv slick-initialized slick-slider">
<div class="slick-list">
<div class="slick-track">
<div class="slick-slide">
    <div class="wrapper">
        <div class="not-to-slide">              
            <h2>Some Title</h2>
                <div class="somedeeperleveldiv">
                    <span>some text</span>
                </div>
        </div> <!-- end of divs that do not have to slide //-->
        <div class="slideable">
            <div>
                <div>
                some image or text
                </div>
            </div>
        </div>
        <div class="slideable">
            <div>
                <div>
                some image or text
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>

滑块初始化为：

$('.sliderdiv').slick({
            some options
        }).slick(slickFilter, '.slideable');

我尝试过 SlickFilter，如 .slick(slickFilter, '.slideable');但它给出了

ReferenceError: slickFilter is not defined

有没有办法从滑块中排除“不可滑动”类 div 以及该 div 内的所有内容？这里的想法是仅将“slideable”类的 div 用作幻灯片。

如果此类“不可滑动”div 出现在要滑动的 div 内部，我们也将不胜感激。

Answer 1

您可以使用“幻灯片”参数。

这是来自 Markus Hesper 的 codepen 的示例 - 我添加了一些样式，以便您可以看到幻灯片，但主要部分是在初始化 slick 时添加了“slide”参数：

jQuery(function(){
  jQuery('.slider').slick({dots:true, slide: '.slide'});  
})

body {font-family: monospace}
.slide {
  min-height: 400px;
  padding: 18px 16px;
  border: 1px solid #ccc;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<div class="slider">
  <div class="slide">slide 1</div>
  <div class="slide">slide 2</div>
  <div class="slide">slide 3</div>
  <div>
    <h1>ignore me</h1>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>