Slick Carousel and Slick lightbox on same element
<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>