如何使光滑的滑块仅将目标元素作为具有特定 class 的幻灯片

Question

我有一行图像，我想使用 slick slider 将其变成一个滑块。

点击每张图片时，每张图片都会打开一个 lightgallery 弹出窗口，并带有一些自定义 HTML 作为标题。问题是光滑的滑块也将此标题视为单独的幻灯片。

我的html:

<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>
    <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>
</span>

我只希望“.favitem”成为一张幻灯片，在上面的示例中 #caption1 被忽略而不是变成一张幻灯片。我该怎么做？

我试过这个：

$('.designfavimgs').slick({
  slide: '.favitem',
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 1,
    arrows: false,
    dots: false,
    autoplay: false,
    speed: 2000,
    responsive: [
    {
      breakpoint: 991,
            settings: {
                slidesToShow: 2,
        slidesToScroll: 2
      }
    }
    ]
});

我认为 slide: '.favitem' 可以解决这个问题，但它仍然将字幕视为单独的幻灯片，即使它们被设置为 display:none 内联。光滑的滑块只是否决它并使它们显示为幻灯片。

$('.designfavimgs').slick({
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 1,
    arrows: false,
    dots: false,
    autoplay: false,
    speed: 2000,
    responsive: [
    {
      breakpoint: 991,
            settings: {
                slidesToShow: 2,
        slidesToScroll: 2
      }
    }
    ]
});

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
    
<span class="designfavimgs">
    <a data-sub-html="#caption1" class="favitem" href="website.nl/image.jpg" data-src="https://via.placeholder.com/150">
        <img src="https://via.placeholder.com/150" alt="" />
    </a>
    <div id="caption1" style="display: none;">
        <img src="https://via.placeholder.com/150" />
        <h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
        <div class="gallerypopupbtns">
            <a href="https://via.placeholder.com/150">
                <button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
            </a>
        </div>
    </div>
</span>

Answer 1

为什么不简单地包装每件物品？因为 slick 是通过添加父项 class 启动的，并且所有子项都被视为单独的 slides/items。

<div class="designfavimgs">
    <div class="slick-element">
        <a data-sub-html="#caption1" class="favitem" href="website.nl/image.jpg" data-src="https://via.placeholder.com/150">
            <img src="https://via.placeholder.com/150" alt="" />
        </a>
        <div id="caption1" style="display: none;">
            <img src="https://via.placeholder.com/150" />
            <h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
            <div class="gallerypopupbtns">
                <a href="https://via.placeholder.com/150">
                    <button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
                </a>
            </div>
        </div>
    </div>
    <div class="slick-element">
        <a data-sub-html="#caption1" class="favitem" href="website.nl/image.jpg" data-src="https://via.placeholder.com/150">
            <img src="https://via.placeholder.com/150" alt="" />
        </a>
        <div id="caption2" style="display: none;">
            <img src="https://via.placeholder.com/150" />
            <h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
            <div class="gallerypopupbtns">
                <a href="https://via.placeholder.com/150">
                    <button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
                </a>
            </div>
        </div>
    </div>
</div>

如何使光滑的滑块仅将目标元素作为具有特定 class 的幻灯片

How to make slick slider only target elements as a slide with a certain class

html

javascript

jquery

slider

slick.js