Vue整合swiperjs

swiper是一个第三方轮播图组件

官网地址：https://swiperjs.com/vue#swiper-props

安装

npm i swiper

安装后package.json文件的dependencies会显示swiper的版本信息

导入

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

export default {
    components:{
        Swiper,
        SwiperSlide
    }
}
</script>

使用

    <Swiper>
        <SwiperSlide>
            <img src="../assets/a.png">
        </SwiperSlide>
        <SwiperSlide>
            <img src="../assets/b.png">
        </SwiperSlide>
        <SwiperSlide>
            <img src="../assets/c.png">
        </SwiperSlide>
    </Swiper>

添加分页

额外引入：

import { Pagination } from 'swiper/modules';
import 'swiper/css/pagination';

在data中声明：

data(){
        return{
            modules:[Pagination]
        }
    }

swiper标签中添加：

<Swiper :modules="modules" :pagination="{ clickable: true }">
    </Swiper>