lavkach3

1
$(function () {
2
  // product detail
3

4
  var sync1 = $("#sync1");
5
  var sync2 = $("#sync2");
6
  var slidesPerPage = 4;
7
  var syncedSecondary = true;
8

9
  sync1
10
    .owlCarousel({
11
      items: 1,
12
      slideSpeed: 2000,
13
      nav: false,
14
      autoplay: false,
15
      dots: true,
16
      loop: true,
17
      rtl: true,
18
      responsiveRefreshRate: 200,
19
      navText: [
20
        '<svg width="12" height="12" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 3px;stroke: #fff;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>',
21
        '<svg width="12" height="12" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 3px;stroke: #fff;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>',
22
      ],
23
    })
24
    .on("changed.owl.carousel", syncPosition);
25

26
  sync2
27
    .on("initialized.owl.carousel", function () {
28
      sync2.find(".owl-item").eq(0).addClass("current");
29
    })
30
    .owlCarousel({
31
      items: slidesPerPage,
32
      items: 6,
33
      margin: 16,
34
      dots: true,
35
      nav: false,
36
      rtl: true,
37
      smartSpeed: 200,
38
      slideSpeed: 500,
39
      slideBy: slidesPerPage,
40
      responsiveRefreshRate: 100,
41
    })
42
    .on("changed.owl.carousel", syncPosition2);
43

44
  function syncPosition(el) {
45
    var count = el.item.count - 1;
46
    var current = Math.round(el.item.index - el.item.count / 2 - 0.5);
47

48
    if (current < 0) {
49
      current = count;
50
    }
51
    if (current > count) {
52
      current = 0;
53
    }
54

55
    sync2
56
      .find(".owl-item")
57
      .removeClass("current")
58
      .eq(current)
59
      .addClass("current");
60
    var onscreen = sync2.find(".owl-item.active").length - 1;
61
    var start = sync2.find(".owl-item.active").first().index();
62
    var end = sync2.find(".owl-item.active").last().index();
63

64
    if (current > end) {
65
      sync2.data("owl.carousel").to(current, 100, true);
66
    }
67
    if (current < start) {
68
      sync2.data("owl.carousel").to(current - onscreen, 100, true);
69
    }
70
  }
71

72
  function syncPosition2(el) {
73
    if (syncedSecondary) {
74
      var number = el.item.index;
75
      sync1.data("owl.carousel").to(number, 100, true);
76
    }
77
  }
78

79
  sync2.on("click", ".owl-item", function (e) {
80
    e.preventDefault();
81
    var number = $(this).index();
82
    sync1.data("owl.carousel").to(number, 300, true);
83
  });
84
});
85