同じ要素にスリックなカルーセルとスリックライトボックス

Question

私は滑らかなカルーセルを使用しているImのスライダーを持っています。そして、滑らかなライトボックスのためにこれらのイメージにライトボックスが必要です。

マイコード：私は画像のいずれかをクリックすると

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

、それだけではなく、ライトボックスを使用するよりも新しいタブで画像を開きます。

Answer 1

自分で修正しましたので、回答が追加されました。

これは、slickが初期化されると、マークアップに余分なdivが追加されたためです。

だから私は次のように少し深くslickLightbox()セレクターを行う必要があります。

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