Thumbnail slider using Owl Carousel 2 jQuery

Step 1:

Add the required plugin style and script files in the <head> tag,


<!--******** Stylesheets ********-->
<!--Bootstrap is used for responsive page--> 
<link href="Your-folder-path/bootstrap.css" rel="stylesheet" type="text/css"> 
<!--Font-Awesome is used for left and right icons to scroll the image items-->
<link href="Your-folder-path/font-awesome.css" rel="stylesheet" type="text/css">
<!--Owl.carousel is used to achieve thumbnail slider-->
<link href="Your-folder-path/owl.carousel.css" rel="stylesheet" type="text/css">
<!--******** Script Files ********-->
<!--Latest jQuery--> 
<script type="text/javascript" src="Your-folder-path/jquery-2.2.0.min.js"></script> 
<!--Bootstrap--> 
<script type="text/javascript" src="Your-folder-path/bootstrap.min.js"></script> 
<!--Owl.carousel is used to achieve thumbnail slider--> 
<script type="text/javascript" src="Your-folder-path/owl.carousel.min.js"></script>

Step 2:

Create the items for the main slider in html page like this and also create the navigation links to that main slider,


<!--Main Slider Container--> 
<div class="slider-container"> 
   <!--Main Slider Start--> 
   <div id="slider" class="slider owl-carousel"> 
      <div class="item"> 
         <div class="content"> 
            <img src="Your-folder-path/images/1.jpg" class="img-responsive"> 
         </div> 
      </div> 
      <!--Repeat the below item to add more items in slider--> 
      <div class="item"> 
         <div class="content"> 
            <!--Your Image Link--> 
         </div> 
      </div> 
   </div> 
   <!--Main Slider End-->
 
   <!--Navigation Links For the Main Items--> 
   <div class="slider-controls"> 
      <a class="slider-left" href="javascript:;"><span><i class="fa fa-2x fa-chevron-left"></i></span></a> 
      <a class="slider-right" href="javascript:;"><span><i class="fa fa-2x fa-chevron-right"></i></span></a> 
   </div> 
</div>

Create the items for the thumbnail slider in html page like this,


<!--Thumbnail slider container--> 
<div class="thumbnail-slider-container"> 
   <!--Thumbnail Slider Start--> 
   <div id="thumbnailSlider" class="thumbnail-slider owl-carousel"> 
      <div class="item"> 
         <div class="content"> 
            <img src="Your-folder-path/images/1.jpg" class="img-responsive"> 
         </div> 
      </div> 
      <!--Repeat the below item to add more items in slider(Here add the items same as in main slider items)--> 
      <div class="item"> 
         <div class="content"> 
            <!--Your Image Link--> 
         </div> 
      </div> 
   </div> 
   <!--Thumbnail Slider End--> 
</div>

Step 3:

Write Javascript code inside the <script> tag and call the owl-carousel plugin to achieve thumbnail slider


 $(document).ready(function () {
  // reference for main items
  var slider = $('#slider');
  // reference for thumbnail items
  var thumbnailSlider = $('#thumbnailSlider');
  //transition time in ms
  var duration = 500;

  // carousel function for main slider
  slider.owlCarousel({
   loop:false,
   nav:false,
   items:1
  }).on('changed.owl.carousel', function (e) {
   //On change of main item to trigger thumbnail item
   thumbnailSlider.trigger('to.owl.carousel', [e.item.index, duration, true]);
  });

  // carousel function for thumbnail slider
  thumbnailSlider.owlCarousel({
   loop:false,
   center:true, //to display the thumbnail item in center
   nav:false,
   responsive:{
    0:{
     items:3
    },
    600:{
     items:4
    },
    1000:{
     items:6
    }
   }
  }).on('click', '.owl-item', function () {
   // On click of thumbnail items to trigger same main item
   slider.trigger('to.owl.carousel', [$(this).index(), duration, true]);

  }).on('changed.owl.carousel', function (e) {
   // On change of thumbnail item to trigger main item
   slider.trigger('to.owl.carousel', [e.item.index, duration, true]);
  });


  //These two are navigation for main items
  $('.slider-right').click(function() {
   slider.trigger('next.owl.carousel');
  });
  $('.slider-left').click(function() {
   slider.trigger('prev.owl.carousel');
  });
 });

Step 4:

Add some styles to look better

.slider-container{
   position: relative;
   display: block;
  }
  .slider-container .slider .content img{
   width: 100%;
   height: 400px;
  }
  .slider-container .slider-controls a{
   position: absolute;
   top: 45%;
   z-index: 100;
   color: #333333;
  }
  .slider-container .slider-controls a.slider-left{
   left: -25px;
  }
  .slider-container .slider-controls a.slider-right{
   right: -25px;
  }
  .thumbnail-slider-container{
   margin-top: 5px;
  }
  .thumbnail-slider .content{
   padding:5px;
  }
  .thumbnail-slider .owl-item.active.center{
   border: 3px solid #333333;
  }

You can download the required plugins here Owl Carousel 2, Bootstrap , Font-Awesome and Latest jQuery

If you like this, Please Share... Thank You...

Nagaraja Sabhahith

I'm Web Designer/Developer, My passion is all about creating Best Websites. Always keeping it clean and simple with that added functionally of user interaction you would like to see.