Product detail js

js 
/// Main Slider Product //
document.addEventListener("DOMContentLoaded", function () {
    var mainSlides = document.querySelectorAll('.product-main-slide');
    if (mainSlides.length >= 2) {
        var mainSlider = new Flickity('.product-slideshow', {
            cellAlign: 'left',
            wrapAround: false,
            pageDots: false,
            prevNextButtons: true,
            groupCells: true,
            cellAlign: 'center', // Center the active slide
        });
        var thumbnails = document.querySelectorAll('.product__thumbs--scroller .product__thumb-item');
        thumbnails.forEach(function (thumbnail, index) {
            thumbnail.addEventListener('click', function () {
                // Select the corresponding slide
                mainSlider.select(index);
                
                // Remove 'active' class from all thumbnails
                thumbnails.forEach(function (thumb) {
                    thumb.classList.remove('active');
                });

                // Add 'active' class to the clicked thumbnail
                thumbnail.classList.add('active');
            });
        });
       // Update active thumbnail when the main slider changes
        mainSlider.on('change', function (index) {
            // Remove 'active' class from all thumbnails
            thumbnails.forEach(function (thumb) {
                thumb.classList.remove('active');
            });

            // Add 'active' class to the corresponding thumbnail
            thumbnails[index].classList.add('active');
        });
      
    }
});

/*** PDD SLIDER ***/
or jquery 

$(document).ready(function () {
    var $mainSlides = $('.product-main-slide');
    if ($mainSlides.length >= 2) {
        var $mainSlider = $('.product-slideshow').flickity({
            cellAlign: 'center', // Center the active slide
            wrapAround: false,
            pageDots: true,
            prevNextButtons: false,
            groupCells: true,
        });

        var flkty = $mainSlider.data('flickity');
        var $thumbnails = $('.product__thumbs--scroller .product__thumb-item');
        
        // Make the first thumbnail active by default
        $thumbnails.first().addClass('active');
        
        // Select the first slide by default
        flkty.select(0);

        $thumbnails.on('click', function () {
            var index = $(this).index();
            
            // Select the corresponding slide
            flkty.select(index);
            
            // Remove 'active' class from all thumbnails
            $thumbnails.removeClass('active');
            
            // Add 'active' class to the clicked thumbnail
            $(this).addClass('active');
        });

        // Update active thumbnail when the main slider changes
        $mainSlider.on('change.flickity', function (event, index) {
            // Remove 'active' class from all thumbnails
            $thumbnails.removeClass('active');
            
            // Add 'active' class to the corresponding thumbnail
            $thumbnails.eq(index).addClass('active');
        });
    }
});