productDetail.js
2.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// product detail
$(function () {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var slidesPerPage = 4;
var syncedSecondary = true;
sync1.owlCarousel({
items: 1,
slideSpeed: 2000,
nav: true,
autoplay: false,
dots: true,
loop: true,
rtl:true,
responsiveRefreshRate: 200,
navText: ['<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>', '<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>'],
}).on('changed.owl.carousel', syncPosition);
sync2
.on('initialized.owl.carousel', function () {
sync2.find(".owl-item").eq(0).addClass("current");
})
.owlCarousel({
items: slidesPerPage,
items: 6,
margin: 16,
dots: true,
nav: false,
rtl:true,
smartSpeed: 200,
slideSpeed: 500,
slideBy: slidesPerPage,
responsiveRefreshRate: 100
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
var count = el.item.count - 1;
var current = Math.round(el.item.index - (el.item.count / 2) - .5);
if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
sync2
.find(".owl-item")
.removeClass("current")
.eq(current)
.addClass("current");
var onscreen = sync2.find('.owl-item.active').length - 1;
var start = sync2.find('.owl-item.active').first().index();
var end = sync2.find('.owl-item.active').last().index();
if (current > end) {
sync2.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
sync2.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
sync1.data('owl.carousel').to(number, 100, true);
}
}
sync2.on("click", ".owl-item", function (e) {
e.preventDefault();
var number = $(this).index();
sync1.data('owl.carousel').to(number, 300, true);
});
})