本篇总结没有使用官网教程提到的"在Vue中使用swiper"的vue-awesome-swiper, 用的就是普通的swiper,亲测可用。附上刚做好的效果图:
首先要在NodeJS中下载安装swiper:
npm i swiper --save
然后在需要使用swiper的组件中引入它的js和css文件:
<script>
import Swiper from "swiper/swiper-bundle.min.js"
import "swiper/swiper-bundle.min.css"
</script>
在mounted钩子中初始化一个Swiper实例:
mounted () {
new Swiper(".swiper-container",{
loop:true, //循环
pagination: { //分页符
el: '.swiper-pagination',
},
})
}
//更多选项见swiper官网:https://www.swiper.com.cn/usage/index.html
最后放上对应的HTML结构:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div> //第一页内容
<div class="swiper-slide">Slide 2</div> //第二页内容
<div class="swiper-slide">Slide 3</div> //第三页内容
</div>
<div class="swiper-pagination"></div> //小圆圈分页符
</div>