1.编译器: vscode
2.调试浏览器chrome
swiperAPI文档:link
配置环境
npm install swiper@5.x vue-awesome-swiper --save
5.x下载的swiper的版本为5.4.5
<template>
<div id="app">
<swiper :options="swiperOption" id="swiper-container">
<swiper-slide><img src="./assets/images/index01.jpg"></swiper-slide>
<swiper-slide><img src="./assets/images/index02.jpg"></swiper-slide>
<!--分页器-->
<div class="swiper-pagination" slot="pagination"></div>
<!--前进后退需要手动添加点击事件-->
<div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
<div class="swiper-button-next" slot="button-next" @click="next"></div>
</swiper>
</div>
</template>
<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'App',
data: function () {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
loop: true,
autoplay: {
delay: 1000,
disableOnInteraction: false
},
speed: 1000
}
}
},
components: {
Swiper,
SwiperSlide
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#swiper-container{
width: 600px;
height: 300px;
}
img{
width: 600px;
height: 300px;
}
</style>
我图片网上找的,所以用了img来设置了下大小