安装版本："swiper": "^6.0.0",
安装版本："vue-awesome-swiper": "^4.1.1",
<div class="swiper_conter"><swiper class="swiper" :options="swiperOption" ref="mySwiper"><swiper-slideclass="swiper-wrapper"v-for="(item, index) in dataList":key="index"><div class="swiper-slide" @mouseenter="mouseenterchange(item.pic)"><div class="awiper_icon"></div><el-imageclass="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 {dataList:[{pic:'图片',name:'文字'}],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;}
}
