本文介绍了如何在Vue项目中实现轮播图加图片预览功能，以及解决Vue报错找不到swiper.css的问题。通过降级swiper版本到5.4.5，并详细提供安装、引入swiper的步骤，以及实现图片预览的DOM结构和相关样式。文章还提醒使用cnpm安装并提供了完整代码。
目前多个图片是这样的:
想要的效果：轮播 + 预览 (一次轮播一张)
1.首先要下载swiper
备注:swiper 的坑
坑1
以前只需要安装vue-awesome-swiper就够了
现在需要weiper一起安装才行
坑2
按官网教程操作后vue会报错 找不到swiper.css
因为版本不同 项目目录变了 点开node安装文件夹里也只能看到'swiper/swiper-bundle.css'
如果用swiper-bundle.css会有很多问题，比如我遇到的就是分页器不生效
这里就需要降低swiper版本了 我这里使用的是5.4.5
下面代码请放心使用
cnpm install vue-awesome-swiper swiper@5.4.5 --save
注意：使用cnpm下载
cnpm安装方法：
npm install -g cnpm --registry=https://registry.npm.taobao.org
最低0.47元/天 解锁文章
扫一扫
1723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
