swiper.js |仅当用户滚动到滑块 id 时才开始自动播放 swiper

Question

当用户滚动到 swiper wrapper id 时如何启动 swiper 自动播放 它通常在打开页面时自动运行

如何控制自动播放事件？

这是一个例子： https://codepen.io/elostoracom/pen/ExgRNvP

这里是js代码

new Vue({
  el: ".home-slider",
  data() {
    return {
      homeSwiper: "",
    };
  },
  mounted() {
    this.homeSwiper = new Swiper(".home-slider", {
      updateOnWindowResize: true,
      loop: true,
      slidesPerView: 1.5,
      spaceBetween: 10,
      speed: 500,
      centeredSlides: true,
      centeredSlidesBounds: true,
      autoplay: {
        delay: 1000,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  }
})

Answer 1

如何控制自动播放事件？

您可以使用swiper.autoplay.start() 启动自动播放，swiper.autoplay.stop() 命令式停止自动播放。

当用户滚动到 swiper wrapper id 时如何启动 swiper Autoplay 它通常在打开页面时自动运行

Intersection Observer 让您知道元素何时在视图中。它在（现代）浏览器中得到了很好的支持，但如果你希望它在所有浏览器中都能工作，你可以使用 polyfill。

这是codepen