Some time ago, I found a good round casting plug-in, which supports mobile phones and PC, but does not support mouse hover operation, here to add it by yourself

<div class="sliderbox" @mouseenter="stopSlider" @mouseleave="startSlider"> <slider ref="slider" :options="slideroptions"  @slide='slide' @tap='onTap' @init='onInit'> <! -- Use slideritem slot --> <slideritem> <img SRC ="./assets/swiper1.png"> </slideritem> <slideritem> <img src="./assets/swiper2.png"> </slideritem> <! -- Loading can be customized --> <! -- <div slot="loading">loading... </div> --> </slider> </div> slideroptions: any = { currentPage: 0, autoplay: 3000, loop: true, direction: 'horizontal', timingFunction: 'ease', // loopedSlides:1, // slidesToScroll:1, // thresholdDistance:500, // thresholdTime:3000, // speed: 300} // Event stopSlider() {const that: any = this.$refs.slider.$emit('autoplayStop')} startSlider() {const that: any = this that.$refs.slider.$emit('autoplayStart', 3000) }Copy the code

File address: Warpcgd.github. IO /vue-concise…