如何让Slick Slider仅将指定类名的元素识别为轮播幻灯片

解决方案 #

你可以选择以下任意一种方案解决问题：

方案1：补全Slick筛选配置

你之前的配置思路是正确的，slide参数就是用来指定轮播项的，你贴出的可运行代码没有加入这个配置才会失效。修改为如下配置即可生效：

$('.designfavimgs').slick({
  slide: '.favitem', // 保留该配置指定仅.favitem类元素作为轮播项
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  autoplay: false,
  speed: 2000,
  responsive: [
    {
      breakpoint: 991,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }
  ]
});

该方案不需要修改原有HTML结构，#caption1不属于.favitem类，不会被Slick识别为轮播项，同时也不影响lightgallery读取它作为弹窗说明文案。

方案2：调整HTML结构（兼容更稳妥）

lightgallery的data-sub-html是通过ID匹配元素，和元素所处页面位置无关。你可以把所有说明文案的div统一移到.designfavimgs轮播容器外部，从根源上避免Slick扫描到这些元素，示例结构如下：

<!-- 轮播容器仅存放轮播项 -->
<span class="designfavimgs">
    <a data-sub-html="#caption1" class="favitem" href="website.nl/image.jpg" data-src="website.nl/image.jpg">
        <img src="website.nl/image.jpg" alt="" />
    </a>
    <!-- 其余轮播项 -->
</span>

<!-- 所有说明文案统一放在轮播容器外 -->
<div id="caption1" style="display: none;">
    <img src="website.nl/logo.jpg" />
    <h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
    <div class="gallerypopupbtns">
        <a href="gallerij/stockfotos/image.jpg">
            <button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
        </a>
    </div>
</div>

如果有特殊场景上述两个方案都不适用，可以加一行CSS兜底，强制隐藏被误识别的说明文案轮播项：

.slick-slide[id^="caption"] {
  display: none !important;
}

内容的提问来源于stack exchange，提问作者twan