<template>
<div class="swiper">
<el-row :gutter="10" class="row-col">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="col-info">
/* 添加 移入移出的事件 */
<swiper
:options="swiperOptionInfo"
ref="mySwipers"
class="info-swiper"
@mouseenter.native="mouseEnter"
@mouseleave.native="mouseLeave"
>
<swiper-slide
v-for="item in datas"
:key="item.id"
class="swiper-item"
>
<img :src="item.img" alt="" class="img" />
</swiper-slide>
<!-- <div slot="pagination" class="swiper-pagination"></div> -->
<div
slot="button-prev"
class="swiper-button-prev hidden-sm-and-down"
></div>
<div
slot="button-next"
class="swiper-button-next hidden-sm-and-down"
></div>
</swiper>
</el-col>
</el-row>
</div>
</template>
export default {
name: "Swipers",
components: {},
props: ["datas"],
data() {
return {
swiperOptionInfo: {
loop: true,
autoplay: {
delay: 6000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
// pagination: {
// el: '.swiper-pagination',
// clickable: true,
// },
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
};
},
methods: {
mouseEnter() {
this.$refs.mySwipers.$swiper.autoplay.stop();
},
mouseLeave() {
this.$refs.mySwipers.$swiper.autoplay.start();
},
},
};
.swiper {
margin-top: 100px;
.row-col {
max-height: 650px;
.col-info {
height: 100%;
.info-swiper {
height: 100%;
.swiper-item {
width: 100%;
max-height: 550px;
// cursor: pointer;
.img {
width: 100%;
height: 100%;
}
}
}
}
}
}
