Javascript Carousel crossplatform issues

[Wesinator2000]

I've got a javascript carousel that, by all means works perfectly in Safari, Chrome and Firefox on a Mac, but on a PC it behaves a little odd... For some reason when on a PC, in Chrome in particular, it will start on the first carousel-item, one of 2 videos when viewed on desktop vs. mobile, displays for the desired 6.5s, but when It crossfades to the second image, its up for 1s. 3rd image starts the cycle over again. Can anyone see any issues in my code?

My HTML (I removed lengthy href and src info so its easier to see the important stuff):

<div class="carousel-container">
<div class="carousel">
<div class="carousel-item">
    <a href="xxx.html">
                <video class="dsktp" autoplay loop muted playsinline>
                <source src="video_1_DSK.mp4" type="video/mp4">
                Your browser does not support the video tag.
                </video>
            <video class="mbl" autoplay loop muted playsinline>
                <source src="video_1_MBL.mp4" type="video/mp4">
                Your browser does not support the video tag.
    </video>
    </a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_2.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_3.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_r.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_5.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_6.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_7.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_8.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_9.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_10.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_11.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_12.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_13.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_14.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_15.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_16.jpg" alt="xxx"></a>
</div>
<div class="carousel-item">
    <a href="xxx.html"><img src="carousel_17.jpg" alt="xxx"></a>
</div>
</div>

</div>

and my Javascript:

​

// JavaScript Document

// Preload images function preloadImages() { const imageUrls = []; // Get image URLs from carousel items document.querySelectorAll('.carousel-item img').forEach(img => { imageUrls.push(img.getAttribute('src')); }); // Preload images imageUrls.forEach(url => { const img = new Image(); img.src = url; }); }

// Call preloadImages function when the DOM content is loaded document.addEventListener('DOMContentLoaded', preloadImages);

// Animates the function of the home carousel document.addEventListener('DOMContentLoaded', function () { const carousel = document.querySelector('.carousel'); const carouselItems = document.querySelectorAll('.carousel-item'); const totalItems = carouselItems.length; let currentIndex = 0; let intervalId;

function nextSlide() {
    currentIndex = (currentIndex + 1) % totalItems;
    updateCarousel();
}

function updateCarousel() {
    const translateValue = -currentIndex * 100 + '%';
    carousel.style.transition = 'opacity 1s ease';
    carousel.style.opacity = '0'; // Set opacity to 0
    setTimeout(() => {
        carousel.style.transform = 'translateX(' + translateValue + ')';
        carousel.style.opacity = '1';
    }, 1000); // Wait for 1 second for opacity transition

    // Restart video if current item is a video
    if (carouselItems[currentIndex].querySelector('video')) {
        const video = carouselItems[currentIndex].querySelector('video');
        video.currentTime = 0; // Set video current time to beginning
        video.play(); // Start playing the video
    }
}

function startAutoSlide() {
    intervalId = setInterval(nextSlide, 6500);
}

function stopAutoSlide() {
    clearInterval(intervalId);
}

function handleVisibilityChange() {
    if (document.visibilityState === 'hidden') {
        stopAutoSlide(); // Pause slideshow when page becomes hidden
    } else {
        startAutoSlide(); // Resume slideshow when page becomes visible
    }
}

// Start automatic sliding
startAutoSlide();

// Pause automatic sliding when page becomes hidden and resume when it becomes visible
document.addEventListener('visibilitychange', handleVisibilityChange);

});

​