Swiper JS has some delay when calling the stop method

Question

I'm using SwiperJS framework. I'm working on a project where I need to pause the slider from animating when the items are hovered on. My working code stops it from animating but it has some delays before it stops. How can I prevent the delay?

$mySwiper = $(".swiper-container");

new Swiper($mySwiper[0], {
  spaceBetween: 0,
  centeredSlides: true,
  direction: "vertical",
  speed: 4000,
  autoplay: {
    delay: 1,
  },
  cssEase: "linear",
  loop: true,
  slidesPerView: "auto",
  allowTouchMove: false,
});

$mySwiper.hover(
  function () {
    $mySwiper.css("background", "yellow");
    this.swiper.autoplay.stop();
  },
  function () {
    $mySwiper.css("background", "none");
    this.swiper.autoplay.start();
  }
);

.swiper-container {
    width: 100%;
    max-width: 940px;
    height: 500px;
    margin: 0 auto;
}

.swiper-container .swiper-slide {
    border-bottom: #ccc solid 1px;
    height: auto;
}

.swiper-container .swiper-slide {
   text-align: center;
    /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
}

.swiper-container img {
    max-height: 200px;
}

.swiper-container .swiper-wrapper {
    transition-timing-function: linear;
}

user_9291557 · Answer

This can be a little confusing.

The API swiper.autoplay.stop() changes autoplay mode => (Not "freeze/stop" the "current" slider transform position).

Set very slow AutoPlay speed to see this idea in action:

const swiper = new Swiper('.swiper', {
    spaceBetween: 0,
    centeredSlides: true,
    //direction: "vertical",
    speed: 7000,
    autoplay: {
      delay: 10,
      pauseOnMouseEnter: true, 
    },
    loop: true,
    slidesPerView: "auto",
  });

  swiper.on('autoplay', function () {
    $("#status").text("autoplay")
  });

  swiper.on('autoplayStop', function () {
    $("#status").text("Wait until autoplayStop");
    $("#status").css("color", "red");

  });

#status{
  color: green;
}

.swiper .swiper-slide {
   display: flex;
   justify-content: center;
   align-items: center;
}
.swiper-container img {
    max-height: 200px;
}

SUM: Hover > The transition of "this" slide ends > autoplay disable.

Good -or- bad this is the API. https://swiperjs.com/swiper-api#autoplay

Old related github issue: https://github.com/nolimits4web/Swiper/issues/1798

Swiper JS has some delay when calling the stop method

1 Answers