title: Slick Carousel and Slick lightbox on same element
body: <p>I have a slider for which Im using slick carousel, and then I need a lightbox on these images for slick lightbox. </p>
  
  <p>My code: </p>
  
  <pre><code>&lt;ul class="gallery-slider"&gt;
     &lt;?php foreach($gallery as $image) : ?&gt;
      &lt;li&gt;
        &lt;a href="image-url-here"&gt;
          &lt;img src="image-url-here"&gt;
        &lt;/a&gt;                         
      &lt;/li&gt;
     &lt;?php endforeach; ?&gt;
  &lt;/ul&gt;
  
  $('.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: '&gt; li &gt; a'
      });
  </code></pre>
  
  <p>When I click on one of the images, it just opens the image in a new tab rather than using the lightbox. </p>