Tattoo Video Page - Javascript Good Single Slider Type

<script>
document.addEventListener('DOMContentLoaded', function () {

    let userInteracted = false; // Track if user interacted with slider

    // Pause and mute all videos except active one on load to prevent autoplay issues
    function pauseAllVideos(swiper) {
        swiper.slides.forEach((slideEl, index) => {
            const video = slideEl.querySelector('video');
            if (video) {
                if (index === swiper.activeIndex) {
                    video.pause();
                    video.muted = false;          // Unmute active video
                    video.setAttribute('controls', ''); // Show controls on active video
                } else {
                    video.pause();
                    video.muted = true;           // Mute inactive videos
                    video.removeAttribute('controls');
                }
            }
        });
    }

    // Play active slide video and pause others
    function playActiveVideo(swiper) {
        swiper.slides.forEach((slideEl, index) => {
            const video = slideEl.querySelector('video');
            if (video) {
                if (index === swiper.activeIndex) {
                    video.muted = false;          // Unmute active video
                    video.setAttribute('controls', '');
                    video.play().catch(() => {
                        // Ignore play failures (autoplay blocked)
                    });
                } else {
                    video.pause();
                    video.muted = true;           // Mute inactive videos
                    video.removeAttribute('controls');
                }
            }
        });
    }

    // Set up each slider instance
    const allSliderWrappers = document.querySelectorAll('.nlb-video-slider-wrapper');

    allSliderWrappers.forEach((sliderWrapper) => {
        const swiperContainer = sliderWrapper.querySelector('.nlb-video-swiper');
        if (!swiperContainer) return;

        const paginationElement = sliderWrapper.querySelector('.nlb-video-pagination');
        const nextButton = swiperContainer.querySelector('.swiper-button-next');
        const prevButton = swiperContainer.querySelector('.swiper-button-prev');
        const swiperSlides = swiperContainer.querySelectorAll('.swiper-wrapper .swiper-slide');
        const initialSlideIndex = Math.max(0, Math.ceil(swiperSlides.length / 2) - 1);

        // Init Swiper
        const swiper = new Swiper(swiperContainer, {
            effect: 'cards',
            grabCursor: true,
            loop: false,
            rewind: true,
            slidesPerView: 'auto',
            centeredSlides: true,
            initialSlide: initialSlideIndex,
            watchSlidesProgress: true,
            cardsEffect: {
                slideShadows: false,
                perSlideRotate: 4,
                perSlideOffset: 32
            },
            navigation: {
                nextEl: nextButton,
                prevEl: prevButton
            },
            pagination: {
                el: paginationElement,
                clickable: true,
                renderBullet: function (index, className) {
                    let posterUrl = '';
                    const slide = this.slides[index];
                    if (slide) {
                        const video = slide.querySelector('video');
                        if (video && video.hasAttribute('poster')) {
                            posterUrl = video.getAttribute('poster');
                        }
                    }
                    return `<div class="${className}"><img src="${posterUrl}" alt="Thumbnail ${index + 1}"></div>`;
                }
            },
            on: {
                init: function (swiper) {
                    pauseAllVideos(swiper);
                },
                slideChange: function (swiper) {
                    if (!userInteracted) {
                        userInteracted = true;
                    }
                    if (userInteracted) {
                        playActiveVideo(swiper);
                    }
                },
                click: function (swiper, event) {
                    const clickedElement = event.target;
                    if (clickedElement.classList.contains('swiper-video-drag-overlay')) {
                        const activeSlide = swiper.slides[swiper.activeIndex];
                        if (!activeSlide) return;
                        const video = activeSlide.querySelector('video');
                        if (!video) return;

                        if (video.paused) {
                            video.play().catch(() => {});
                        } else {
                            video.pause();
                        }
                    }
                }
            }
        });

        // Pause all videos on initial load explicitly
        pauseAllVideos(swiper);
    });
});
</script>