1、首先需要打开HBuilderX开发工具，创建一个Web项目，并将swiper插件对应的CSS和JavaScript文件拷贝到项目中。
2、然后新建一个静态页面，然后将swiper插件的文件引入到页面中。
3、接着在<body></body>标签中，插入多个div标签并设置class属性。
4、利用类选择器和伪类选择器nth-child，设置几个div标签的样式。
5、调用jquery初始化函数，对swiper插件进行初始化，设置autoplay属性。
6、最后保存代码并运行项目，打开浏览器查看界面效果。
<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%
}
}
}
}
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）