skip to Main Content

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();
      }
    },
  1. I tried to recreate the swiper without autoplay
  2. tried to influence the swiper container through styles
  3. Change parameters dynamically

couldn’t find any information

2

Answers


  1. Chosen as BEST ANSWER

    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


  2. Try this

    <template>
      <div
        class="swiper-brand-container"
        @mouseenter="stopAutoplay"
        @mouseleave="startAutoplay"
      >
        <!-- Your Swiper content goes here -->
      </div>
    </template>
    

    Or this

    <template>
      <div
        class="swiper-brand-container"
        @mouseenter="freezeSlider"
        @mouseleave="unfreezeSlider"
      >
        <!-- Your Swiper content goes here -->
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          swiper: null,
          isFrozen: false,
        };
      },
      mounted() {
        this.initSwiper();
      },
      methods: {
        initSwiper() {
          this.swiper = new Swiper('.swiper-brand-container', {
            loop: true,
            spaceBetween: 120,
            slidesPerView: 'auto',
            centeredSlides: true,
            nested: true,
            speed: 5000,
            autoplay: {
              delay: 0,
            },
          });
        },
        freezeSlider() {
          if (this.swiper && !this.isFrozen) {
            this.swiper.autoplay.stop();
            this.swiper.params.autoplay.delay = 0;
            this.swiper.params.speed = 0;
            this.isFrozen = true;
          }
        },
        unfreezeSlider() {
          if (this.swiper && this.isFrozen) {
            this.swiper.params.autoplay.delay = 5000; // Back to default
            this.swiper.params.speed = 5000; // Back to default
            this.swiper.autoplay.start();
            this.isFrozen = false;
          }
        },
      },
    };
    </script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search