https://duztec.in/assets/js/prod_detail.js

1$(document).ready(function () {
2    var mainCarousel = $(".main-carousel");
3    var thumbnailCarousel = $(".thumbnail-carousel");
4
5    // Initialize the main carousel
6    mainCarousel.owlCarousel({
7        items: 1,
8        loop: true,
9        nav: false,
10        dots: false,
11        autoplay: true,
12        autoplayTimeout: 5000,
13    });
14
15    // Initialize the thumbnail carousel
16    thumbnailCarousel.owlCarousel({
17        items: 2,
18        margin: 10,
19        nav: false,
20        dots: false,
21        center: true,
22        responsive: {
23            0: {
24                items: 2
25            },
26            600: {
27                items: 2
28            }
29        }
30    });
31
32    // Click event for thumbnail carousel
33    thumbnailCarousel.on('click', '.owl-item', function (e) {
34        e.preventDefault();
35        var index = $(this).index();
36        mainCarousel.trigger('to.owl.carousel', [index, 300, true]);
37        thumbnailCarousel.trigger('to.owl.carousel', [index, 300, true]);
38    });
39
40    // Sync the thumbnail carousel with the main carousel
41    mainCarousel.on('changed.owl.carousel', function (event) {
42        var index = event.item.index;
43        thumbnailCarousel.trigger('to.owl.carousel', [index, 300, true]);
44    });
45});
46
47document.querySelectorAll('.tab').forEach(tab => {
48    tab.addEventListener('click', function () {
49        document.querySelectorAll('.tab').forEach(item => item.classList.remove('active'));
50        document.querySelectorAll('.tab-pane').forEach(content => content.classList.remove('active'));
51
52        this.classList.add('active');
53        document.getElementById(this.getAttribute('data-tab')).classList.add('active');
54    });
55});