vue3中使用swiper完整版教程

介绍

在 vue3 中使用 swiper, 实现轮播图的效果；如果组件样式等模块引入不当，很有可能导致，页面无效果；或者想要的箭头或者切换效果异常问题。具体使用方式如下所示：

使用方式

1. 使用命令 npm install swiper 安装 swiper插件；
2. 在main.js里使用样式文件，如下所示：

import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css';
createApp(App).use(VueAwesomeSwiper).use(router).mount('#app')

3. 在使用的页面，引入需要使用到的组件，比如常用的左右切换箭头，小圆点指示器等；如下所示：

import {
   
    Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式（按需导入）
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation'