起因
使用 swiper 的时候,遇到了一些问题,通过这篇文章总结一下。先来简单说下我都遇到了哪些问题,后面会有对应的解决方法。
- 安装默认 swiper版本,用了 swiper官网推荐的配置,会有报错和不兼容的情况
这是我遇到的报错:To install them, you can run: npm install --save swiper/css swiper/vue - 左右切换按钮无效,分页Pagination不显示
- vue单文件组件中无法修改swiper样式
安装
建议安装 swiper@6.3.5 这个版本。我开始是默认安装的最高版本,Pagination分页器配置了之后没有效果,降到这个版本就好使了。版本太高可能会出现不兼容的情况。
npm i swiper@6.3.5
配置
我没用官网给的方法,用的时候会出现一些报错,还有不兼容的情况,文档介绍的也不是很清楚。查了一些资料,总结出一个好使的配置方法。
在 Vue 中使用 Swiper 这是官网的链接
html和css
<template>
<div class&#