?安装版本:"swiper": "^6.0.0",
安装版本:"vue-awesome-swiper": "^4.1.1",
<div class="swiper_conter">
<swiper class="swiper" :options="swiperOption" ref="mySwiper">
<swiper-slide
class="swiper-wrapper"
v-for="(item, index) in dataList"
v-if="index > 0"
:key="index"
>
<div class="swiper-slide" @mouseenter="mouseenterchange(item.pic)">
<div class="awiper_icon"></div>
<el-image
class="multimedia"
:src="item.pic"
fit="fill"
></el-image>
<h3 class="dot">{{ item.name }}</h3>
</div>
</swiper-slide>
</swiper>
<div class="owl-next" @click="swiperNext"></div>
<div class="owl-prev" @click="swiperPrev"></div>
</div>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
components: {
Swiper,
SwiperSlide,
},
data() {
return {
swiperOption: {
loop: false,
slidesPerView: 4,
spaceBetween: 30,
navigation: {
nextEl: '.owl-next',
prevEl: '.owl-prev',
},
},
}
}
mouseenterchange(url) {
console.log('鼠标移入')
},
swiperNext() {
this.$refs.mySwiper.$swiper.slideNext()
},
swiperPrev() {
this.$refs.mySwiper.$swiper.slidePrev()
},
.swiper_conter {
position: relative;
margin: 36px 0 120px;
padding: 0 30px;
width: 100%;
overflow: hidden;
height: 188px;
.swiper {
.swiper-wrapper {
padding: 0 15px;
.swiper-slide {
position: relative;
.multimedia {
width: 100%;
height: 143px;
}
.dot {
border: 1px solid #e8e8e8;
border-top: 0;
line-height: 42px;
padding: 0 3%;
font-weight: normal;
font-size: 16px;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
&:hover {
background-image: linear-gradient(to top, #c1ac8c 0%, #d3bf9f 100%);
border-color: #d3bf9f;
color: #fff;
}
}
.awiper_icon {
width: 50px;
height: 50px;
top: 25%;
left: 40%;
z-index: 99;
position: absolute;
background: url('https://www.yglock.com/cn/images/PicList002173-icon_video.png')
no-repeat center center;
}
}
}
}
.owl-prev {
position: absolute;
width: 28px;
height: 28px;
top: 50%;
margin-top: -14px;
left: 0;
background: url('https://www.yglock.com/cn/images/PicList002173-btn.png')
no-repeat left bottom;
cursor: pointer;
}
.owl-next {
position: absolute;
width: 28px;
height: 28px;
top: 50%;
margin-top: -14px;
right: 0;
background: url('https://www.yglock.com/cn/images/PicList002173-btn.png')
no-repeat right bottom;
cursor: pointer;
}
}