JavaScript Slider Functionality Update

if ($('.overlay-slider-grid').length) {
    const $overlaySliderGrid = $('.overlay-slider-grid');
    const $overlayslider = $('.overlay-slider');
    const $mainparent = $overlaySliderGrid.find('.content-overlayslider');
    const $hoverItems = $mainparent.find('.hover-item');

    let currentIndex = 0; // Track the selected item for keyboard navigation or scroll

    // Function to update background and content
    const updateSlider = ($item) => {
        const newBg = $item.data('bg');
        $overlayslider.css('background-image', `url(${newBg})`);

        $item.find('.content').addClass('active');
        $item.find('.description').addClass('active');
        $item.siblings().find('.content, .description').removeClass('active');
    };

    // Keyboard navigation (up/down arrow keys)
    $(document).on('keydown', function (e) {
        if (e.key === 'ArrowUp') {
            currentIndex = (currentIndex - 1 + $hoverItems.length) % $hoverItems.length;
            updateSlider($hoverItems.eq(currentIndex));
        } else if (e.key === 'ArrowDown') {
            currentIndex = (currentIndex + 1) % $hoverItems.length;
            updateSlider($hoverItems.eq(currentIndex));
        }
    });

    // Intersection Observer to detect visibility of the overlay-slider-grid
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                $mainparent.addClass('visible');
                updateSlider($hoverItems.eq(currentIndex)); // Trigger initial update
            } else {
                $mainparent.removeClass('visible');
            }
        });
    }, observerOptions);

    observer.observe($overlaySliderGrid[0]);

    // Browser scrollbar event to update content
    $(window).on('scroll', function () {
        const scrollTop = $(window).scrollTop();
        const overlayOffset = $overlaySliderGrid.offset().top;
        const overlayHeight = $overlaySliderGrid.outerHeight();

        if (scrollTop >= overlayOffset && scrollTop <= overlayOffset + overlayHeight) {
            const relativeScroll = (scrollTop - overlayOffset) / overlayHeight; // 0 to 1 range
            const newIndex = Math.floor(relativeScroll * $hoverItems.length);

            if (newIndex !== currentIndex) {
                currentIndex = newIndex;
                updateSlider($hoverItems.eq(currentIndex));
            }
        }
    });
}