CODEWITHSUNDEEP
javascriptjqueryswiper.js
Ahmed Elzelaky
Ahmed Elzelaky

Reputation: 21

swiper.js | start autoplay swiper only when user scroll to slider id

how to start swiper Autoplay when user scroll to swiper wrapper id It usually runs automatically when opening the page

how can i control autoplay events ?

This is example: https://codepen.io/elostoracom/pen/ExgRNvP

And here is the js code

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,
      },
    });
  }
})

Upvotes: 0

Views: 4640

Answers (1)

c0m1t
c0m1t

Reputation: 1242

how can i control autoplay events ?

You can use swiper.autoplay.start() to start the autoplay and swiper.autoplay.stop() to stop the auto play imperatively.

how to start swiper Autoplay when user scroll to swiper wrapper id It usually runs automatically when opening the page

Intersection Observer lets you know when an element is in view. It's got a good support in the (modern) browsers, but if you want it to work in all browsers, you can use the polyfill.

Here is a codepen

Upvotes: 1

Related Questions