Слайдер с эффектом Ken Burns (приближение) с паузой по клику

Приветствую! Есть слайдер на swiper js. Реализован эффект приближения, но никак не могу добиться нужного результата. Смысл в том, что при клике по изображению эффект приближения должен остановиться (встать на паузу) в том же месте, где он был когда я по нему кликнул. Так же, в этот момент должен остановиться autoplay слайдера. Остановка происходит на 5 секунд, либо возобновляется при повторном клике по изображению (если 5 секунд не прошло). На данный момент клик срабатывает не так как надо, эффект приближения не останавливается, а возвращается в исходный размер, и не встает на паузу autoplay. Если кто-то сможет помочь, буду благодарен. Мой код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper Slider with Zoom Effect</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .swiper-container {
            width: 100%;
            height: 100vh;
        }
        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .swiper-slide img {
            max-width: 100%;
            transition: transform 5s ease-in-out;
        }
        .zoom {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://images.wallpaperscraft.com/image/single/lynx_animal_predator_1398659_1920x1080.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://images.wallpaperscraft.com/image/single/lake_trees_sunset_1398065_1920x1080.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://images.wallpaperscraft.com/image/single/field_river_trees_1399666_1920x1080.jpg" alt=""></div>
         </div>
        <div class="swiper-pagination"></div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper-container', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

        let zoomInterval;
        let isPaused = false;

        function startZoom() {
            const activeSlide = document.querySelector('.swiper-slide-active img');
            if (activeSlide) {
                activeSlide.classList.add('zoom');
                zoomInterval = setTimeout(() => {
                    activeSlide.classList.remove('zoom');
                    swiper.slideNext();
                    startZoom();
                }, 5000);
            }
        }

        function stopZoom() {
            const activeSlide = document.querySelector('.swiper-slide-active img');
            if (activeSlide) {
                clearTimeout(zoomInterval);
                activeSlide.classList.remove('zoom');
            }
        }

        function togglePause() {
            isPaused = !isPaused;
            const activeSlide = document.querySelector('.swiper-slide-active img');
            if (isPaused) {
                stopZoom();
            } else {
                startZoom();
            }
        }

        swiper.on('slideChange', () => {
            if (!isPaused) {
                stopZoom();
                startZoom();
            }
        });

        document.querySelectorAll('.swiper-slide').forEach(slide => {
            slide.addEventListener('click', togglePause);
        });

        // Начинаем эффект приближения
        startZoom();
    </script>
</body>
</html>