vue3.2应用swiper实现图片轮播

阅读量：

介绍

在vue3框架下，通过引入swiper组件可实现缩略图的轮播展示效果，具体实现方式如以下图表所示：

在这里插入图片描述

使用

打开项目终端界面，执行 npm install swiper --save 命令以完成相关依赖的安装过程。
在 main.js 文件中，需导入 swiper.css 样式文件并进行调用，具体实现代码如下所示；

复制代码

    import { createApp } from 'vue'
    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')

全部评论 (0)

还没有任何评论哟~