目标:利用swiper在VUE中进行简单轮播图的设计。
实现效果:点击左右箭头可进行图片的切换
实现方法:
<template>
<div class="recommendPage">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) of imgList" :key="index"><img :src="require(`../assets/${item.name}`)" alt=""></swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template>
<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
loop: true,
autoplay: false,
// 这个是一个框内能同时显示多个slide的
slidesPerView: 2,
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
},
imgList: [
{name: 'IU_01.jpg'},
{name: 'IU_02.jpg'},
{name: 'IU_03.jpg'},
{name: 'IU_04.jpg'},
{name: 'IU_05.jpg'},
{name: 'IU_06.jpg'}
]
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log("this is current swiper instance object", this.swiper);
// this.swiper.slideTo(3, 1000, false);
}
};
</script>
<style scoped >
.recommendPage .swiper-container{
position: relative;
width: 500px;
height: 200px;
background: pink;
}
.recommendPage .swiper-container .swiper-slide{
width: 100%;
line-height: 200px;
background: yellowgreen;
color: #000;
font-size: 16px;
text-align: center;
}
img{
width: 100%;
height: 100%;
}
</style>