Owl Carousel 2 Thumbnails

/*Downloaded from https://www.codeseek.co/claudiopedrom/owl-carousel-2-thumbnails-JGpbQy */
.slider {
  width: 100%;
  height: 200px;
  background: black;
  color: white;
  text-align: center;
}

.thumbnail {
  width: 25%;
  height: 100px;
  float: left;
  background: gray;
}
.thumbnail.active {
  background: blue;
}
.thumbnail:hover {
  background: blue;
}
.thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  text-decoration: none;
}

/*Downloaded from https://www.codeseek.co/claudiopedrom/owl-carousel-2-thumbnails-JGpbQy */
$(document).ready(function() {
  // Init Slider
  $('.owl-slider').owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    nav: false,
    dots: false,
  });
  // Pref add class active to 1st thumbnail via js
  $('.thumbnail').eq(0).addClass('active');
  // When slider autoplay or drag is true 
  $('.owl-slider').on('changed.owl.carousel', function(event) {
    $('.thumbnail').removeClass('active');
    var sliders = 4;
    var currentItem = event.item.index - 2;
    if(currentItem >= sliders) {
      currentItem = 0;
    }
    $('.thumbnail').eq(currentItem).addClass('active');
  });
  // When thumbnail is clicked
  $('.thumbnail a').click(function(event) {
    event.preventDefault();
    $('.thumbnail').removeClass('active');
    var index = $('.thumbnail a').index(this);
    $('.thumbnail').eq(index).addClass('active');
    $('.owl-slider').trigger('to.owl.carousel', [index, 300, true]);
  });
});