Javascript 如何仅在滑块进入视口后才开始自动播放滑块？

我正在使用此代码初始化swiper滑块

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 0,
    parallax: true,
    autoplay: 5000,
    speed: 800,
    autoplayDisableOnInteraction: false
}) 

由于滑块位于页面的第四部分内，并且只有在向下滚动页面后才可见，因此我希望只有在滑块进入视口后才能启动自动播放。

---

有什么方法可以做到这一点吗？

您可以使用类似jquery的东西-

---

假设您正在尝试播放第四张幻灯片：

var mySwiper = new Swiper ('.swiper-container', { // Optional parameters pagination: '.swiper-pagination', paginationClickable: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 0, parallax: true, autoplay: 5000, speed: 800, autoplayDisableOnInteraction: false, onSlideChangeStart: function(s){ if (s.activeIndex === 3) { // do something here, 4th slide is active now and so on console.log('hi! Try to reach 4th slides'); s.startAutoplay(); // calling autoplay on 4th slides. } } }) var mySwiper=new Swiper（“.Swiper container”{ //可选参数 分页：'.swiper分页'， paginationClickable:true， 下一个按钮：'.swiper按钮下一个'， prevButton:“.swiper button prev”， 间距：0， 视差：对， 自动播放：5000， 速度:800,， autoplayDisableOnInteraction:false， onSlideChangeStart:功能{ 如果（s.activeIndex==3）{ //在此处执行操作，第四张幻灯片现在处于活动状态，依此类推 log（'嗨！试着看第四张幻灯片'）； s、 startAutoplay（）；//在第四张幻灯片上调用自动播放。 } } })欢迎使用SO:-）请解释此代码解决问题的原因。看看 var mySwiper = new Swiper ('.swiper-container', { // Optional parameters pagination: '.swiper-pagination', paginationClickable: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 0, parallax: true, autoplay: 5000, speed: 800, autoplayDisableOnInteraction: false, onSlideChangeStart: function(s){ if (s.activeIndex === 3) { // do something here, 4th slide is active now and so on console.log('hi! Try to reach 4th slides'); s.startAutoplay(); // calling autoplay on 4th slides. } } })

var mySwiper = new Swiper('.swiper-container', {
   autoplay: {
    delay: 5000,
  },

});