在vue-cli3中使用基本swiper6个人总结

4,255 阅读1分钟

本篇总结没有使用官网教程提到的"在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>

第一次写文章,不足之处请多指教