continous autoplay progress bar

footer-scripts.html

<script>

document.addEventListener("DOMContentLoaded", function () {

    const sliderIdentifier = 'tdshme'; /* change this to match your identifier (the data-x-id attribute value) */
    const progressContainer = document.querySelector('.progress-container');
    const progressBar = progressContainer.querySelector('.progress-bar');


    
    document.querySelector('.x-slider[data-x-id=' + sliderIdentifier + ']').addEventListener('x_slider:init', () => {

        const splide = xSlider.Instances[sliderIdentifier];
        
        const autoplayInterval = splide.options.autoplay === 'pause' ? 0 : (splide.options.interval || 5000);
        
        if (autoplayInterval > 0) {
            const totalSlides = splide.length;
            
            let progress = 0;
            let animationId = null;
            
            const progressPerMs = (100 / totalSlides) / autoplayInterval;
            
            let lastTime = performance.now();
            
            function updateProgress(timestamp) {
                const elapsed = timestamp - lastTime;
                
                progress += elapsed * progressPerMs;
                
                if (progress >= ((splide.index + 1) * (100 / totalSlides))) {
                    if (splide.index === totalSlides - 1) {
                        progress = 0;
                    }
                }
                
                progressBar.style.width = progress + '%';
                
                lastTime = timestamp;
                
                animationId = requestAnimationFrame(updateProgress);
            }
            
            animationId = requestAnimationFrame(updateProgress);
            
            splide.on('move', function(newIndex) {
                const targetProgress = newIndex * (100 / totalSlides);
                
                if (Math.abs(progress - targetProgress) > 2) {
                    progress = targetProgress;
                }
            });
            
            splide.on('autoplay:pause', function() {
                cancelAnimationFrame(animationId);
            });
            
            splide.on('autoplay:play', function() {
                lastTime = performance.now();
                animationId = requestAnimationFrame(updateProgress);
            });
            
            splide.on('click', function() {
                progress = splide.index * (100 / totalSlides);
                lastTime = performance.now();
            });
        }
    });
});

</script>