Splide slider active slide on thumb hover/mouseenter

splide-thumb-slider.html

<div id="product-gallery">
    <div id="splide-thumbnail" class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide" aria-label="Carousel item"></li>
                <li class="splide__slide" aria-label="Carousel item"></li>
                <li class="splide__slide" aria-label="Carousel item"></li>
            </ul>
        </div>
    </div>
    <div id="main-splide" class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide" aria-label="Carousel item"></li>
                <li class="splide__slide" aria-label="Carousel item"></li>
                <li class="splide__slide" aria-label="Carousel item"></li>
            </ul>
        </div>
    </div>
</div>

<script>
window.addEventListener('DOMContentLoaded', function () {
    // Init Splide slider for product gallery
    ["load", "resize"].forEach(function (evt) {
        window.addEventListener(evt, gallerySliderInit);
    });

    function gallerySliderInit() {
        const productSlider = document.querySelector('#main-splide');
        const pSliderThumb = document.querySelector('#splide-thumbnail');
        if(typeof productSlider != "undefined" && productSlider != null) {
            var pSpl = new Splide(productSlider, {
                type		: "slide",
                perPage		: 1,
                autoplay	: false,
                arrows		: true,
                pagination	: false,
                drag		: true,
                breakpoints: {
                    860: {
                        arrows      : false
                    }
                }
            });
            var pSpThumb = new Splide(pSliderThumb, {
                direction       : 'ttb',
                height          : '38rem',
                rewind          : true,
                fixedWidth      : 120,
                fixedHeight     : 120,
                isNavigation    : true,
                gap             : 4,
                focus           : 'start',
                pagination      : false,
                arrows			: false,
                cover           : true,
                dragMinThreshold: {
                    mouse: 4,
                    touch: 10,
                },
                breakpoints: {
                    860: {
                        fixedWidth  : 94,
                        fixedHeight : 94,
                        direction   : 'ltr',
                        height      : 'auto',
                        arrows      : true
                    }
                }
            });
            pSpl.sync( pSpThumb );
            pSpl.mount();
            pSpThumb.mount();

            // 
            // Get the list items within the thumbnail slider
            const thumbnailSlides = document.querySelectorAll('#splide-thumbnail li');

            // Iterate over each thumbnail slide
            thumbnailSlides.forEach((thumbnailSlide, index) => {
                // Add mouseenter event listener to each thumbnail slide
                thumbnailSlide.addEventListener('mouseenter', () => {
                    // Ensure the index is within the bounds of the main slides
                    if (index >= 0 && index < pSpl.length) {
                        // Update active classes for thumbnails and main slides
                        pSpThumb.go(index);
                        pSpl.go(index);
                    }
                });
            });


        }
    }
});
</script>