1. Install swiper
(Official website: Swiper Chinese website - carousel map slide js plugin, H5 page front-end development )
Download the carousel map plug-in [Note: @5.x required], otherwise there will be various bugs.
npm i [email protected] [email protected] -S
2.HTML code
<template>
<div class="swiper">
<div @mouseleave="leave" @mouseenter="enter">
<swiper ref="mySwiper" :options="swiperOption">
<swiper-slide v-for="(item, index) in clist"
:key="item.imgUrl + index">
<img :src="item.imgUrl" />
</swiper-slide>
</swiper>
</div>
<div @mouseenter="enter" @mouseleave="leave">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</template>
3. JS code
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
components: {
Swiper,
SwiperSlide
},
data () {
return {
clist: [
{
imgUrl: require('/src/assets/images/certify01.png')
},
{
imgUrl: require('/src/assets/images/certify02.png')
},
{
imgUrl: require('/src/assets/images/certify03.png')
},
{
imgUrl: require('/src/assets/images/certify04.png')
}
,
{
imgUrl: require('/src/assets/images/certify05.png')
}
],
swiperOption: {
// 衔接滑动
loop: true,
// 自动滑动
autoplay: {
delay: 2000,
// 如果设置为true,当切换到最后一个slide时停止自动切换。
stopOnLastSlide: false,
// 如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay
disableOnInteraction: false
},
// 切换效果 "coverflow"(3d流)
effect: 'coverflow',
// 设置slider容器能够同时显示的slides数量
slidesPerView: 4,
// 居中幻灯片。设定为true时,当前的active slide 会居中,而不是默认状态下的居左。
centeredSlides: true,
// 设置为true则点击slide会过渡到这个slide。
slideToClickedSlide: true,
coverflowEffect: {
// slide做3d旋转时Y轴的旋转角度
rotate: 0,
// 每个slide之间的拉伸值,越大slide靠得越紧。5.3.6 后可使用%百分比
stretch: 0,
// slide的位置深度。值越大z轴距离越远,看起来越小。
depth: 60,
// depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。
modifier: 5,
// 是否开启slide阴影
slideShadows: true
},
// 使用前进后退按钮来控制Swiper切换。
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
}
},
computed: {
mySwiper () {
// mySwiper 是要绑定到标签中的ref属性
return this.$refs.mySwiper.$swiper
}
},
methods:{
enter () {
this.mySwiper.autoplay.stop()
},
leave () {
this.mySwiper.autoplay.start()
},
}
}
</script>
4. css code
<style scoped lang="scss">
.swiper{
width:1200px;
margin: 0 auto;
padding-top: 50px;
padding-bottom: 40px;
}
.swiper-button-prev{
}
</style>
The above image size is 300X300