https://www.photek.com/wp-content/themes/photek/assets/js/get-owl-slider.js

1$(document).ready(function () {
2  var bigimage = $("#big");
3  var thumbs = $("#thumbs");
4  var syncedSecondary = true;
5  var syncingFromThumbs = false;
6
7// Hero has autoplay
8bigimage.owlCarousel({
9  items: 1,
10  slideSpeed: 2000,
11  nav: false,
12  autoplay: true,
13  dots: false,
14  loop: true,
15  responsiveRefreshRate: 200
16}).on("changed.owl.carousel", syncPosition);
17
18// Thumbs
19thumbs.owlCarousel({
20  dots: false,
21  stagePadding: 0,
22  margin: 0,
23  autoplay: false,
24  nav: false,
25  mouseDrag: true,
26  smartSpeed: 2000,
27  loop: true,
28  responsive: {
29    0:   { items: 2, margin: 0, mouseDrag: true },
30    600: { items: 3, mouseDrag: true },
31    1200:{ items: 4 },
32    1600:{ items: 4 }
33  }
34}).on("initialized.owl.carousel", function () {
35  thumbs.find(".owl-item").eq(0).addClass("current");
36});
37
38// Hero → Thumbs
39function syncPosition(el) {
40  var current = el.item.index - el.relatedTarget._clones.length / 2;
41  var count = el.item.count;
42
43  if (current < 0) current = count - 1;
44  if (current >= count) current = 0;
45
46  //highlighting current thumbnail
47  thumbs.find(".owl-item").removeClass("current");
48  thumbs.find(".owl-item:not(.cloned)").eq(current).addClass("current");
49
50  var onscreen = thumbs.find(".owl-item.active").length - 1;
51  var start = thumbs.find(".owl-item.active").first().index();
52  var end = thumbs.find(".owl-item.active").last().index();
53
54  if (current > end || current < start) {
55    thumbs.trigger("to.owl.carousel", [current, 300, true]);
56  }
57}
58
59thumbs.on("click", ".owl-item", function (e) {
60
61  e.preventDefault();
62  var absIndex = $(this).index();
63  var relIndex = thumbs.data("owl.carousel").relative(absIndex);
64
65  // Move both carousels to the real index
66  thumbs.trigger("to.owl.carousel", [relIndex, 300, true]);
67  bigimage.trigger("to.owl.carousel", [relIndex, 300, true]);
68});
69
70
71});