Swiper4 is used to smooth longitudinal seamless scrolling. After clicking or dragging the mouse, the animation is not completely completed, the mouse moves out of the automatic rotation, and the dynam

Use swiper4 Smooth longitudinal seamless rolling , Click or drag the mouse , The animation is not complete , Mouse removal Automatic rotation failure

Every time I encounter some tricky problems , Then Baidu solved it , All you meet are pasted and copied 、 Allied , It's over and can't be solved , I really feel very tired ....

First summarize what you found on the Internet

1. disableOnInteraction: Whether to prohibit after user operation autoplay( The default value is ： true： prohibit );

speed: 2000,
autoplay: {
    
  delay: 2500,
  disableOnInteraction: false,
}

One thing to note here ： autoplay.delay The value of must be greater than speed, Otherwise, it's useless

2. autoPalyDisableOnInteraction: This logic is consistent with the first one above , It's just that this is v3 edition ,disableOnInteraction yes v4 And later ,

autoPalyDisableOnInteraction: false,
autoplay: {
    
  ...
}

3. Define your own onmouse event

mySwiper.el.onmouseover = function(){
    
  mySwiper.autoplay.stop();
}
mySwiper.el.onmouseout = function(){
    
  mySwiper.autoplay.start();
}

4. pauseOnMouseEnter： The most convenient , There will be no problem , But enable version ：6.6.2…

 autoplay: {
    
   pauseOnMouseEnter: true,
 }

So here comes the question ,v4 edition , also delay：0, None of the above can be used ...

Then make one by yourself

Finally, we can only combine api Make a pause by yourself , annoying
The main thing is to combine transitionEnd & slideNext ;
When the current transition is complete , Switch to the next one immediately ;
Don't talk much , Post the final code directly ：

<template>
  <div class='swiper-page'>
    <div class="swiper" id="swiper" ref="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in 20" :key="item" :style="{backgroundColor: colorList[item % colorList.length]}"> slide-item {
    {
     item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';

export default {
    
  data() {
    
    return {
    
      swiperIns: null,
      swiperPause: false, //  Rotation pause 
      colorList: ['#FC88A6', '#F7A753', '#3F8EFA', '#33D260', '#6AC1E1'],
    };
  },
  mounted() {
    
    this.$nextTick(_ => {
    

      //  Before each instantiation , Destroy the previous instance , Prevent animation disorder 
      if (this.swiperIns) {
    
        this.swiperIns.destroy();
      }

      this.swiperIns = new Swiper("#swiper", {
    
        speed: 2000,
        direction: 'vertical',
        height: 80,//  Not used here  slidesPerView  Automatic calculation , Otherwise, problems may occur during initialization 
        loop: true,
        loopAdditionalSlides: 5,
        preventLinksPropagation: true,
        on: {
    
          transitionEnd: () => {
     //  Try to jump to the next one after the transition 
            this.swiperAutoPlay();
          }
        }
      });
      this.swiperAutoPlay(); //  You need to manually start the first jump 

      this.$refs.swiper.onmouseenter = () => {
    
        this.swiperPause = true;
      };
      this.$refs.swiper.onmouseleave = () => {
    
        //  To restart the rotation, you need to set the following two data 
        this.swiperPause = false;
        this.swiperAutoPlay();
      }

    });
  },

  methods: {
    
    //  Try playing the next 
    swiperAutoPlay() {
    
      this.$nextTick(_ => {
    
        if (this.swiperPause === false) {
    
          this.swiperIns.slideNext();
        }
      })
    },
  }

};
</script>

<style lang='scss' scoped>
.swiper-page {
    
  #swiper {
    
    margin: 200px auto 0px;
    width: 500px;
    height: 400px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    overflow: hidden;

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

    .swiper-slide {
    
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 30px;
      text-align: center;
      color: #ccc;
      box-sizing: border-box;
      border: 1px solid #ccc;
    }
  }
}
</style>