光滑的Carousel和光滑的灯箱在同一个元素上

时间:2016-12-06 15:16:16

标签: jquery slick.js

我有一个滑块,我使用光滑的旋转木马,然后我需要这些图像上的灯箱用于光滑的灯箱。

我的代码:

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

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

1 个答案:

答案 0 :(得分:1)

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

这是因为当初始化光滑时,它会为标记添加额外的div。

所以我需要让INFO选择器更加深入:

slickLightbox()