同一元素上的 Slick Carousel 和 Slick 灯箱答案

【问题标题】：Slick Carousel and Slick lightbox on same element同一元素上的 Slick Carousel 和 Slick 灯箱
【发布时间】：2018-05-09 02:35:53
【问题描述】：

我有一个滑块，我使用光滑的轮播，然后我需要在这些图像上添加一个灯箱，用于光滑的灯箱。

我的代码：

<ul class="gallery-slider">
   <?php foreach($gallery as $image) : ?>
    <li>
      <a href="image-url-here">
        <img src="image-url-here">
      </a>                         
    </li>
   <?php endforeach; ?>
</ul>

$('.gallery-slider').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        arrows: true,
        dots: false,
        responsive: [
            {
                breakpoint: 1000,
                settings: {
                    slidesToScroll: 1,
                    slidesToShow: 4,
                    arrows: false
                }
            },
            {
                breakpoint: 700,
                settings: {
                    slidesToScroll: 1,
                    slidesToShow: 2,
                    autoplay: true,
                    autoplaySpeed: 3000,
                    arrows: false
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });

$('.gallery-slider').slickLightbox({
        itemSelector: '> li > a'
    });

当我点击其中一张图片时，它只是在新标签页中打开图片，而不是使用灯箱。

【问题讨论】：

标签： jquery slick.js

【解决方案1】：

我自己解决了这个问题，所以添加了一个答案。

这是因为当 slick 初始化时，它会在标记中添加额外的 div。

所以我需要让slickLightbox() 选择器更深一些，比如：

$('.gallery-slider').slickLightbox({
    itemSelector: '> div > div > div > a'
});

【讨论】：