vue中的轮播图

Posted 2023-04-30

参考技术A 1、首先要npm i swiper

2、在组件内引入swiper的js和css

引入js:----    import Swiperfrom "../../node_modules/swiper/swiper-bundle";

引入css:------@import "../../node_modules/swiper/swiper-bundle.css";

3、在方法里面写一个初始化轮播图的方法:

// 如果需要前进后退按钮

        navigation:

nextEl:'.swiper-button-next',

prevEl:'.swiper-button-prev',

,

);



5、在created里面进行网络请求：

vue 的ssr的轮播图vue-awesome-swiper

参考技术A 官网使用nuxt将vue服务器端渲染ssr成静态页面,利于seo搜索,使用 starter 模板创建,项目开发完成后，使用 npm run generate

轮播图插件:# vue-awesome-swiper

参考地址
npmjs的vue-awesome-swiper
github的vue-awesome-swiper

操作:
1,

目前报错

解决(对应plugin文件夹下的文件)