轮播图效果
参考文档地址:vue-awesome-swipe API文档
有四张图片,可循环播放,从上至下,且第四张图片之后接着播放第一张,无限循环
一、安装依赖
npm install vue-awesome-swiper@3.4.2
npm install swiper@3.1.3
二、引入awesome-swiper
在组件中引入
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
三、template代码
<template>
<div class="store-right"
@mouseenter="on_bot_enter" // 鼠标移入:轮播图暂停播放
@mouseleave="on_bot_leave"> // 鼠标移出:轮播图继续播放
<!-- 人口库 -->
<swiper ref="mySwiper"
:options="swiperOption"
class="swiper-content swiper-container">
<swiper-slide class="store-right-item">
111 //放你想放的文字、图片等
</swiper-slide>
<swiper-slide class="store-right-item">
222
</swiper-slide>
<swiper-slide class="store-right-item">
333
</swiper-slide>
<swiper-slide class="store-right-item">
444
</swiper-slide>
</swiper>
</div>
</template>
四、javascript代码
可调整swiperOption参数来控制播放方式
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
export default {
name: 'store',
components: {
swiper, swiperSlide
},
data () {
return {
swiperOption: {
direction: 'vertical',
height: 500,
slidesPerView: 'auto',
loop: true,
spaceBetween: 0,
speed: 4000,
freeMode: false,
freeModeMomentum: false,
observer: true, // 修改swiper自己或子元素时,自动初始化swiper
observeParents: true, // 修改swiper的父元素时,自动初始化swiper
autoplay: {
delay: 0,
disableOnInteraction: false
}
},
}
},
computed: {
mySwiper () {
return this.$refs.mySwiper.swiper
}
},
methods: {
on_bot_enter () {
console.log('enter')
this.mySwiper.stopAutoplay()
},
on_bot_leave () {
console.log("leave")
this.mySwiper.startAutoplay()
}
}
}
</script>
五、javascript代码
样式自定义,这里是我的样式,根据需要自己调整
<style scoped lang="scss">
.store-right {
width: 300px;
height: 900px;
margin: 50px 0 0 500px;
overflow: hidden;
}
.store-right-item {
margin-top: 5px;
width: 300px;
height: 250px;
background: url(../assets/images/xiaozhan.jpg) no-repeat;
background-size: 100% 100%;
padding: 25px 40px;
}
</style>