I have a swiper which is autoplay and when i hover over it it should stop immediately, now it finishes the transition and only after that it stops
Here is the question how can I stop it immediately at the place where the cursor was hovered, without waiting for the end of the transition
Can I somehow interrupt the transition maibe
Here is Swiper config on Vue
this.swiper = new Swiper('.swiper-brand-container', {
loop: true,
spaceBetween: 120,
slidesPerView: 'auto',
centeredSlides: true,
nested: true,
speed: 5000,
autoplay: {
delay: 0,
},
});
and functions for stop and start autoplay
stopAutoplay() {
if (this.swiper) {
this.swiper.autoplay.stop();
}
},
startAutoplay() {
if (this.swiper) {
this.swiper.autoplay?.start();
}
},
couldn't find any information
Since I didn't find any answer, and no one gave any advice, I had to somehow get out of my way and I didn't think of anything better than to do this scrolling myself
stopAutoplay() {
if (this.swiper) {
clearInterval(this.interval)
}
},
startAutoplay() {
const slideCount = this.swiper.slidesGrid.length
this.interval = setInterval(() => {
this.translate = this.translate + 30
if (this.translate > this.swiper.slidesGrid[slideCount - 3]) {
this.translate = this.swiper.slidesGrid[0]
}
this.$refs.wrapper.style = `transform: translate3d(-${this.translate}px, 0px, 0px)`
}, 500)
},
I just add an interval, and every half a second I move the block by a couple of pixels, and if I need to stop scrolling, I remove the interval
it's not perfect, so if you have ideas on how to improve, please write