JSFiddle - React, Tailwind, and code Playground

by Santosh J

HTML

<script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css">
<div id="black-cover" style="display:none;"></div>
    <div id="cover-page" style="display:none;">
    <div id="close"><a id="lightboxCloseBtn" href="#" onclick="closeBtn();">X</a>

    </div>
     <h2 id="lightboxHeader">Images</h2>

    <div class="your-class">
        <div>
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-" />
        </div>
        <div>
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY" />
        </div>
        <div>
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ" />
        </div>
    </div>
</div>
<a href="#" class="img" data-value="0"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></a>

<a href="#" class="img" data-value="1"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></a>

<a href="#" class="img" data-value="2"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></a>

CSS

#cover-page {
    background: #555 none repeat scroll 0 0;
   position:fixed;
    margin-top: 1%;
   padding-left: 25%;
    width: 70%;
    z-index: 1001;
    overflow:hidden;
}
#black-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    z-index: 1000;
    visibility:hidden;
}
#close {
    position:absolute;
    top:0;
    right:50;
    visibility:inherit;
}

a > img, div > img {
    border:3px solid #000;
}

JavaScript

$(document).ready(function () {
    $('.img').click(function () {
      var CurrentImg=$(this).attr('data-value')
        $("#black-cover").show()
        $("#cover-page").show()
      $('.your-class').slick({
            slidesToShow: 1,
            slidesToScroll: 1,  
          initialSlide:CurrentImg
        });
      
    })
      

})

function closeBtn() {
    $("#black-cover").hide()
    $("#cover-page").hide()
    
$('.your-class').slick('unslick');
}