Slick Carousel with Slick Lightbox

Slick is a JavaScript library to create a carousel slider. The slick jQuery plugin helps to build an image carousel slider in HTML. The main advantage of the Slick carousel slider is to display multiple images in the same place with a user-friendly interface on the web page.

Generally, the images are displayed in a fixed resolution in the carousel slider. If you want to allow users to view the image in large size, the lightbox feature is very useful. With the lightbox feature, the popup window appears with an image slider on clicking the image in the slick slider.

In the example code snippet, we will integrate the slick lightbox plugin in the slick carousel slider using jQuery.

• Initially, the images will be displayed in a carousel slider with the slick plugin.
• On image click, a lightbox popup will appear with the selected image in large view.
• In the popup window, the next/previous navigation links will be available to make the slider accessible from the lightbox.

HTML Code:

<div class="product-slider">
    <div class="slide">
        <img src="images/car-img-1.jpg" data-src="images/car-img-1.jpg" alt="" />
        <h6>Product 1</h6>
    </div>
    <div class="slide">
        <img src="images/car-img-2.jpg" data-src="images/car-img-2.jpg" alt="" />
        <h6>Product 2</h6>
    </div>
    <div class="slide">
        <img src="images/car-img-3.jpg" data-src="images/car-img-3.jpg" alt="" />
        <h6>Product 3</h6>
    </div>
    <div class="slide">
        <img src="images/car-img-4.jpg" data-src="images/car-img-4.jpg" alt="" />
        <h6>Product 4</h6>
    </div>
    <div class="slide">
        <img src="images/car-img-5.jpg" data-src="images/car-img-5.jpg" alt="" />
        <h6>Product 5</h6>
    </div>
</div>

jQuery Library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Slick Slider Library:

<!-- Slick slider CSS library files -->
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

<!-- Slick slider JS library file -->
<script type="text/javascript" src="slick/slick.min.js"></script>

Slick Lightbox Library:

<!-- Slick Lightbox CSS library files -->
<link rel="stylesheet" type="text/css" href="slick-lightbox/slick-lightbox.css"/>

<!-- Slick Lightbox JS library file -->
<script type="text/javascript" src="slick-lightbox/slick-lightbox.min.js"></script>

JavaScript Code:

$(document).ready(function(){
    $('.product-slider').each(function() {
        var slider = $(this);
        slider.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: false,
            arrows: true,
            infinite: true,
        });

        var sLightbox = $(this);
        sLightbox.slickLightbox({
            src: 'data-src',
            itemSelector: '.slick-slide > img',
            imageMaxHeight: 1
        });
    });
});

CSS Code:

.product-slider{
    width: 350px;
    margin: auto;
    background-color: #edeeef;
    color: #000;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
.slide h6{
    font-size: 20px;
    margin: 0;
    padding-top: 10px;
    text-align: center;
}

/* Slick slider custom styles */
.product-slider .slick-slide {
    height:290px !important;
}
.product-slider .slick-slide img {
    height: 250px !important;
    object-fit: cover;
}
.slick-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0;
    height: 40px;
    width: 40px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 10px;
    cursor: pointer;
    background-size: 20px;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
}
.slick-arrow.slick-prev {
    left: 10px;
}
.slick-arrow.slick-next {
    right: 10px;
}
.slick-prev:hover, .slick-next:hover {
    background-color: rgba(0,0,0,0.3);
}
.slick-prev:focus, .slick-next:focus {
    background-color: rgba(0,0,0,0.6);
}