Código Javascript integracción y funcionalidad swiper.js - CSY

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
// Funcionalidad Swiper
const swiper = new Swiper('.swiper-carousel-shorts', {
    slidesPerView: 5,
    spaceBetween: 25,
    slidesPerGroup: 1,
    loop: false,
    loopFillGroupWithBlank: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    breakpoints: {
        1080: {
            slidesPerView: 5,
        },
        981: {
            slidesPerView: 4,
        },
        769: {
            slidesPerView: 3,
        },
        0: {
            slidesPerView: 2,
        },
    },
});

const popup = document.querySelector('.popup');
const popupVideo = document.querySelector('.popup-video');
const popupClose = document.querySelector('.popup-close');
const popupPrev = document.querySelector('.popup-prev');
const popupNext = document.querySelector('.popup-next');
const slides = document.querySelectorAll('.swiper-slide');
const mainHeader = document.getElementById('main-header');
let currentVideoIndex = 0;

slides.forEach((slide, index) => {
    slide.addEventListener('click', () => openPopup(index));
});

function openPopup(index) {
    currentVideoIndex = index;
    updatePopupVideo();
    popup.style.display = 'block';
    mainHeader.style.zIndex = '0';
    document.addEventListener('keydown', handleEscKey);
}

function closePopup() {
    popup.style.display = 'none';
    popupVideo.src = '';
    mainHeader.style.zIndex = '';
    document.removeEventListener('keydown', handleEscKey);
}

function updatePopupVideo() {
    const slide = slides[currentVideoIndex];
    const videoClass = slide.className.split(' ').find(cls => cls.startsWith('video-'));
    if (videoClass) {
        const videoId = videoClass.split('video-')[1];
        popupVideo.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&showinfo=0&rel=0&modestbranding=1`;
    } else {
        console.error('No se encontró la clase de video para esta diapositiva');
    }
}

function handleEscKey(event) {
    if (event.key === 'Escape') {
        closePopup();
    } else if (event.key === 'ArrowLeft') {
        // Flecha izquierda para video anterior
        currentVideoIndex = (currentVideoIndex - 1 + slides.length) % slides.length;
        updatePopupVideo();
    } else if (event.key === 'ArrowRight') {
        // Flecha derecha para siguiente video
        currentVideoIndex = (currentVideoIndex + 1) % slides.length;
        updatePopupVideo();
    }
}

popup.addEventListener('click', (event) => {
    if (event.target === popup) {
        closePopup();
    }
});

popupClose.addEventListener('click', closePopup);
popupPrev.addEventListener('click', () => {
    currentVideoIndex = (currentVideoIndex - 1 + slides.length) % slides.length;
    updatePopupVideo();
});
popupNext.addEventListener('click', () => {
    currentVideoIndex = (currentVideoIndex + 1) % slides.length;
    updatePopupVideo();
});
</script>