swiper.js ，鼠标上移到信息列表自动切换轮播图

上移切换HTML结构

<div class="swiper-leftNews">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-hash="slide1">
            <a href="" target="_blank">
                <div class="img">
                    <div class="pic" style="background-image: url(bg.jpg);">
                        <img src="pic1.jpg" class="img-block" alt="">
                    </div>
                </div>
                <div class="text">
                    <div class="title-2 font24 lh34 fwb900">信息1</div>
                </div>
            </a>
        </div>
        <div class="swiper-slide" data-hash="slide2">
            <a href="" target="_blank">
                <div class="img">
                    <div class="pic" style="background-image: url(bg.jpg);">
                        <img src="pic2.jpg" class="img-block" alt="">
                    </div>
                </div>
                <div class="text">
                    <div class="title-2 font24 lh34 fwb900">信息2</div>
                </div>
            </a>
        </div>
        <div class="swiper-slide" data-hash="slide3">
            <a href="" target="_blank">
                <div class="img">
                    <div class="pic" style="background-image: url(bg.jpg);">
                        <img src="pic3.jpg" class="img-block" alt="">
                    </div>
                </div>
                <div class="text">
                    <div class="title-2 font24 lh34 fwb900">信息3</div>
                </div>
            </a>
        </div>
    </div>
</div>

<div class="focus-right">
    <div class="focus-right-item" data-slide-index="0">
        <a href="" target="_blank">
            <div class="title-2 font18 fwb900 clamp1">swiper上移文案一</div>
        </a>
    </div>
    <div class="focus-right-item" data-slide-index="1">
        <a href="" target="_blank">
            <div class="title-2 font18 fwb900 clamp1">swiper上移文案二</div>
        </a>
    </div>

    <div class="focus-right-item" data-slide-index="2">
        <a href="" target="_blank">
            <div class="title-2 font18 fwb900 clamp1">swiper上移文案三</div>
        </a>
    </div>
</div>

js结构

var mySwiper = new Swiper('.swiper-leftNews', {
    loop: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false
    },
    speed: 1500,
    hashNavigation: true,
    on: {
        slideChange: function () {
            var activeIndex = this.realIndex;
            updateActiveController(activeIndex);
        }
    }
});

function updateActiveController(activeIndex) {
    var controllers = document.querySelectorAll('.focus-right-item');
    controllers.forEach(function (controller) {
        controller.classList.remove('active');
    });
    
    var activeController = document.querySelector('.focus-right-item[data-slide-index="' + activeIndex + '"]');
    if (activeController) {
        activeController.classList.add('active');
    }
}

// 控制器的鼠标悬停事件
var controllers = document.querySelectorAll('.focus-right-item');
controllers.forEach(function (controller) {
    controller.addEventListener('mouseenter', function () {
        var slideIndex = parseInt(this.getAttribute('data-slide-index'));
        updateActiveController(slideIndex);
        mySwiper.slideTo(slideIndex + 1);
    });
});

updateActiveController(0);