Slick Slider Syncing

Owl carousel

by 8ogdan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<div class="js-carousel-1 owl-carousel owl-theme">
  <div class="item"> Your Content 1</div>
  <div class="item"> Your Content 2</div>
  <div class="item"> Your Content 3</div>
  <div class="item"> Your Content 4</div>
  <div class="item"> Your Content 5</div>
  <div class="item"> Your Content 6</div>
  <div class="item"> Your Content 7</div>
  <div class="item"> Your Content 8</div>
  <div class="item"> Your Content 9</div>
  <div class="item"> Your Content 10</div>
</div>

<div class="js-carousel-2 owl-carousel owl-theme thumb">
  <div class="item"> Your Content 1</div>
  <div class="item"> Your Content 2</div>
  <div class="item"> Your Content 3</div>
  <div class="item"> Your Content 4</div>
  <div class="item"> Your Content 5</div>
  <div class="item"> Your Content 6</div>
  <div class="item"> Your Content 7</div>
  <div class="item"> Your Content 8</div>
  <div class="item"> Your Content 9</div>
  <div class="item"> Your Content 10</div>
</div>

CSS

.item{
  display: block;
  background: #f88;
  padding: 100px 40px;
  font-family:arial;
}
.thumb {
  margin-top: 10px;
}
.thumb .item{
  padding: 30px;
}

JavaScript

// Owl Carousel DOM Elements
var carousel1 = '.js-carousel-1';
var carousel2 = '.js-carousel-2';

// Initialize plugin
var owlCarousel1 = $(carousel1).owlCarousel({
  items: 1,
  dots: false
});
var owlCarousel2 = $(carousel2).owlCarousel({
  items: 6,
  margin: 10,
  nav: true,
  dots: false
});

// Sync carousel & add current class
carouselSyncCurrentClass();

// On carousel change: Sync carousel & add current class
owlCarousel1.on('changed.owl.carousel', function() {
  carouselSyncCurrentClass();
});
owlCarousel2.on('changed.owl.carousel', function(event) {
  carouselSyncCurrentClass();
});

// Thumbs switch click event.
owlCarousel2.find('.item').mouseenter(function() {
  var itemIndex = $(this).parent().index();
  owlCarousel1.trigger('to.owl.carousel', itemIndex);
  carouselSyncCurrentClass();
});

function carouselSyncCurrentClass() {
  setTimeout(function() {
    var carousel1ActiveIndex = $('.js-carousel-1 .owl-item.active').index();
    $('.js-carousel-2 .owl-item').removeClass('current');
    var currentItem = $('.js-carousel-2 .owl-item:nth-child(' + (carousel1ActiveIndex + 1) + ')');
    currentItem.addClass('current');

    if (!currentItem.hasClass('active')) {
      if (currentItem.prevAll('.active').length > 0) {
        owlCarousel2.trigger('next.owl.carousel');
      }
      if (currentItem.nextAll('.active').length) {
        owlCarousel2.trigger('prev.owl.carousel');
      }
    }
  }, 100);
}