JavaScript Carousel Slider With Lightbox

This code snippet helps you to create a carousel slider with a lightbox. It defines a container with the class “container” and within it, a div element with the class “your-class1”. Inside this div element, there are four additional div elements, each containing an image with a placeholder URL from the website “placehold.it” and a hyperlink to a different placeholder image URL. The “img” tags define the images to be displayed on the webpage, while the “a” tags create clickable links to the placeholder images.

Finally, the div elements are used to group and style the content within them. Overall, this code creates a container with four images and hyperlinks to placeholder images.

How to Create JavaScript Carousel Slider With Lightbox

First of all, load the following assets into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
<link rel='stylesheet' href='https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css'>
<link rel='stylesheet' href='https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

Create the HTML structure for the carousel slider as follows:

<div class="container">
  <div class="your-class1">
    <div class="">
      <a href="http://placehold.it/400x300/cccccc/333333&text=image1">
      <img src="http://placehold.it/400x300/cccccc/333333&text=image1">   </a>
    </div>
    
    <div class="">
     <a href="http://placehold.it/400x300/333333/cccccc&text=image2">  <img src="http://placehold.it/400x300/333333/cccccc&text=image2"></a>
    </div> 
        <div class="">
      <img src="http://placehold.it/400x300/cccccc/333333&text=image3">
    </div>
    <div class="">
      <img src="http://placehold.it/400x300/333333/cccccc&text=image4">
    </div> 
  </div>
</div>

<br/>
<br/>
<br/>

Now, style the carousel slider using the following CSS styles:

html{
  overflow-y:scroll;
}

.your-class, .your-class1{
  img{
    width:100%;
    height:auto;
  }
}

.full-width{
  .slick-prev {
    margin-left: 40px;
  }

  .slick-next {
    margin-right: 40px;
  }
}

.slick-prev:before, .slick-next:before{
  color:red;
}

Load the following scripts before closing the body tag:

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
<script src='https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.15/slick.js'></script>

Finally, add the following JavaScript function for its functionality;

$(document).ready(function(){
  
$('.your-class1').slick({
    dots : true,
    slidesToShow :2,
    arrows:true,
    responsive: [

      {
        breakpoint: 400,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows:true
        }
      }
    ]
  });  

});


$('.your-class1').slickLightbox({
  itemSelector        : 'a',
  arrows              : true,
  navigateByKeyboard  : true
});

That’s all! hopefully, you have successfully created JavaScript carousel slider with lightbox. If you have any questions or suggestions, feel free to comment below.