SwiperJS滑块切换暂停Vimeo视频：首次有效后续失效问题

问题根源 #

你的代码里始终通过$('#vimeo')获取固定ID的iframe，只有第一个视频的iframe使用了这个ID，后续幻灯片中的视频iframe没有对应ID，导致无法定位并执行暂停操作。

修正后的代码 #

<script src="https://player.vimeo.com/api/player.js"></script> 
<script>    
var videoSwiper = new Swiper('.video-slider', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    on: {
        slideChange: function () {
            $('.swiper-slide').each(function () {
                var vimeoIframe = $(this).find('iframe').get(0);                        
                if (vimeoIframe) {          
                    var player = new Vimeo.Player(vimeoIframe);
                    player.pause();
                }
            });
        },
    },      
});
</script>

关键改动说明 #

• 移除固定查找#vimeo的逻辑，直接使用当前幻灯片内找到的vimeoIframe创建对应播放器实例
• 遍历所有幻灯片时，只要检测到iframe就创建播放器并执行暂停，确保所有视频都能被暂停

内容的提问来源于stack exchange，提问作者JHedge