https://www.coffinandtrout.com/nitropack_static/eCbfQqJXHjCBqmwZhp…11617288be0dcafe4a307b9.product-carousel.js

1(function($) {
2
3    $(document).ready(function() {
4		
5		$('.fusion-load-more-button').text('Load More');
6
7    var sync1 = $("#pImages");
8    var sync2 = $("#pThumbs");
9    var slidesPerPage = 4; //globaly define number of elements per page
10    var syncedSecondary = true;
11
12    sync1.owlCarousel({
13        items: 1,
14        slideSpeed: 2000,
15        nav: true,
16        autoplay: false, 
17        dots: true,
18        loop: true,
19        responsiveRefreshRate: 200,
20        navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
21    }).on('changed.owl.carousel', syncPosition);
22
23    sync2
24        .on('initialized.owl.carousel', function() {
25            sync2.find(".owl-item").eq(0).addClass("current");
26        })
27        .owlCarousel({
28            items: slidesPerPage,
29            dots: true,
30            nav: true,
31            smartSpeed: 200,
32			margin:5,
33            slideSpeed: 500,
34            slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
35            responsiveRefreshRate: 100
36        }).on('changed.owl.carousel', syncPosition2);
37
38    function syncPosition(el) {
39        //if you set loop to false, you have to restore this next line
40        //var current = el.item.index;
41
42        //if you disable loop you have to comment this block
43        var count = el.item.count - 1;
44        var current = Math.round(el.item.index - (el.item.count / 2) - .5);
45
46        if (current < 0) {
47            current = count;
48        }
49        if (current > count) {
50            current = 0;
51        }
52
53        //end block
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
86})( jQuery );