前段时间写轮播发现了一个较好的轮播插件,支持手机和pc,但是不支持鼠标悬停操作,这里自己动手添加一下
<div class="sliderbox" @mouseenter="stopSlider" @mouseleave="startSlider">
<slider ref="slider" :options="slideroptions" @slide='slide' @tap='onTap' @init='onInit'>
<!-- 直接使用slideritem slot -->
<slideritem>
<img src="./assets/swiper1.png">
</slideritem>
<slideritem>
<img src="./assets/swiper2.png">
</slideritem>
<!-- 设置loading,可自定义 -->
<!-- <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
}
// 事件
stopSlider() {
const that: any = this
that.$refs.slider.$emit('autoplayStop')
}
startSlider() {
const that: any = this
that.$refs.slider.$emit('autoplayStart', 3000)
}