Cannot immediately stop slider

[SyntaxSamurai43]

Check that this is really a bug

• I confirm

Reproduction link

https://jsfiddle.net/30xakfyr/

Bug description

I cannot immediately stop the slider with the code below. It waits until the slide is done but the speed is 6000 so that takes a long time before the slider stops. Can you please fix this. On the internet there are lots of other pages where this problem is described.

See the issue here:
https://jsfiddle.net/30xakfyr/

jQuery(document).ready(function($) {

$('.swiper-wrapper').on('mouseenter', function(e){
console.log('stop autoplay');
swiper.autoplay.stop();
});

$('.swiper-wrapper').on('mouseleave', function(e){
console.log('start autoplay');
swiper.autoplay.start();
});

});

Expected Behavior

No response

Actual Behavior

No response

Swiper version

v9.2.4

Platform/Target and Browser Versions

All

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[dmvdev01]

I need this too!

[Dimasmagadan]

Same issue with Swiper 8.3.2

these are options I use

{
		slidesPerView: 'auto',
    freeMode: true,
    loop:true,
    centeredSlides:true,
    freeModeMomentum: false,
    freeModeMomentumBounce: false,
		autoplay: {
		  delay: 0,
      disableOnInteraction: true,
      reverseDirection:true,
		},
    speed: 3000,
		spaceBetween: 50,
	});

tried to go
carousel.el.addEventListener("mouseenter", function (event) { carousel.autoplay.stop(); }, false);

and tried to use code provided above

[JarvisChao]

This is how I solved it with Swiper 11.

let duration: number;
let distanceRatio: number;
const stopAutoplay = () => {
  // Stop slide at current translate.
  swiper.setTranslate(swiper.getTranslate());

  // Calculating the distance between current slide and next slide.
  // 0.3 is equal to 30% distance to the next slide.
  distanceRatio = Math.abs((swiper.width * swiper.activeIndex + swiper.getTranslate()) / swiper.width);

  // The duration that playing to the next slide
  duration = swiper.params.speed! * distanceRatio;
  swiper.autoplay.stop();
};

let startTimer: ReturnType<typeof setTimeout>;
const startAutoplay = (delay = duration) => {
  if (startTimer) clearTimeout(startTimer);
  startTimer = setTimeout(() => {
    swiper.autoplay.start();
    // 400 => Solve the problem that cannot slide prev continuously during autoplay
  }, delay + 400);
};

const isPlaying = ref(true);
let clickable = true;
const handleTogglePlay = () => {
  if (!clickable) return;
  clickable = false;

  if (isPlaying.value) stopAutoplay();
  else {
    const distance = swiper.width * swiper.activeIndex + swiper.getTranslate();

    // Avoid distance that is exactly 0
    duration = distance !== 0 ? duration : 0;
    swiper.slideTo(swiper.activeIndex, duration);
    startAutoplay();
  }
  isPlaying.value = !isPlaying.value;
  setTimeout(() => { clickable = true; }, 200);
};

[Dimasmagadan]

thanks,
I ended up with removing slider completely. Css-only solution turned out to be more performant

I do
animation: scroll 130s linear infinite;
and stop it on hover

[JarvisChao]

If you wanna add prev and next button to control slides, the following code can be used together.

const setEasing = (easing = 'ease') => {
  swiperWrapperEl.value?.style.setProperty('--easing', easing);
};

const handleSwitch = async(getIndex: () => number) => {
  if (!clickable) return;
  clickable = false;
  stopAutoplay();
  
  setEasing('ease');
  const switchSpeed = 1600;

  const index = await getIndex();
  if (index === 999) swiper.slideNext(switchSpeed);
  else if (index === -999) swiper.slidePrev(switchSpeed);
  else swiper.slideTo(index, switchSpeed);

  if (isPlaying.value) startAutoplay(switchSpeed);
  setTimeout(() => { clickable = true; }, switchSpeed);
};

const handlePrev = () => {
  handleSwitch(function() {
    let prevIndex = swiper.activeIndex - 1;
    prevIndex = prevIndex < 0 ? swiper.slides.length + prevIndex : prevIndex;
    return distanceRatio === 0 ? -999 : prevIndex;
  });
};
const handleNext = () => {
  handleSwitch(function() {
    let nextIndex = swiper.activeIndex;
    const lastSwiperIndex = swiper.slides.length - 1;
    nextIndex = nextIndex > lastSwiperIndex ? lastSwiperIndex - nextIndex : nextIndex;
    return distanceRatio === 0 ? 999 : nextIndex;
  });
};

swiper-marquee-play-pause-prev-next.mp4

[JarvisChao]

This is how I solved it with Swiper 11.

let duration: number;
let distanceRatio: number;
const stopAutoplay = () => {
  // Stop slide at current translate.
  swiper.setTranslate(swiper.getTranslate());

  // Calculating the distance between current slide and next slide.
  // 0.3 is equal to 30% distance to the next slide.
  distanceRatio = Math.abs((swiper.width * swiper.activeIndex + swiper.getTranslate()) / swiper.width);

  // The duration that playing to the next slide
  duration = swiper.params.speed! * distanceRatio;
  swiper.autoplay.stop();
};

let startTimer: ReturnType<typeof setTimeout>;
const startAutoplay = (delay = duration) => {
  if (startTimer) clearTimeout(startTimer);
  startTimer = setTimeout(() => {
    swiper.autoplay.start();
    // 400 => Solve the problem that cannot slide prev continuously during autoplay
  }, delay + 400);
};

const isPlaying = ref(true);
let clickable = true;
const handleTogglePlay = () => {
  if (!clickable) return;
  clickable = false;

  if (isPlaying.value) stopAutoplay();
  else {
    const distance = swiper.width * swiper.activeIndex + swiper.getTranslate();

    // Avoid distance that is exactly 0
    duration = distance !== 0 ? duration : 0;
    swiper.slideTo(swiper.activeIndex, duration);
    startAutoplay();
  }
  isPlaying.value = !isPlaying.value;
  setTimeout(() => { clickable = true; }, 200);
};

Full example of the code
https://codepen.io/jarvis73045/pen/rNgwbNJ