vue2中使用swiper@5.4.5
配置轮播图的自动播放功能，即用户不需要点击，轮播图会自动切换图片
该属性有两种配置方式，
第一种是直接配置值，即false或者true。
默认为true，即不自动播放。
如果配置为true，就会自动播放。
: true,
该配置相当于：
autoplay: {delay: 3000, // 每次轮播间隔的ms数，默认3000msstopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认falsedisableOnInteraction: true, // 用户操作轮播图后，比如点击轮播按钮或小圆点，停止轮播
}
第二种配置方法：
autoplay: {delay: 3000, // 每次轮播间隔的ms数，默认3000msstopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认falsedisableOnInteraction: true, // 用户操作轮播图后，比如点击轮播按钮或小圆点，停止自动轮播
}
其中，
设置为true，播放完最后一张，会停止播放
设置为false，用户操作轮播图后，不会停止自动轮播。
即：
autoplay: {delay: 3000, // 每次轮播间隔的ms数，默认3000msstopOnLastSlide: false, // 播放完最后一张图片后继续轮播disableOnInteraction: false, // 用户操作轮播图后，比如点击轮播按钮或小圆点，继续自动轮播
}
直接按照类名修改相应css属性即可。
比如设置宽高：
.swiper {width: 500px;height: 400px;
}
需要注意的是，如果原来的类中，已经设置了某个属性，
但是新属性中又不需要这个属性，就可以按照下面的例子来处理：
假定原来的.默认样式：
.swiper {left: 0;
}
假定我们此时不需要这个left属性，而是我们要自己定义一个right属性：
.swiper {left: unset;right: 10px;
}
修改小圆点样式
如果只修改小圆点颜色的话，
可以用----color: #fff;属性去修改小圆点颜色。
该属性不管style标签里有没有属性，都会生效。
需要特别注意的是，在vue中，如果通过类名修改小圆点样式，
这里面不能加属性，
不然无法修改小圆点样式。
修改小圆点的样式，需要单独写一个不带属性的标签。这样才能确保新样式生效。
比如就像这样：
<style lang="less" scoped>
/*这里是其他标签的样式*/
style><style lang="less">
/*小圆点的样式，需要单独写一个不带scoped属性的style标签*/
.swiper-pagination-bullet {margin-left: 5px;&.swiper-pagination-bullet-active {width: 10px;height: 10px;border-radius: 50%;background-color: #fff;}
}
style>
得到的效果就是这样的：
分页小圆点的相关配置项：
官方文档：
// 配置项
pagination: {el: '.swiper-pagination', // 包裹小圆点的类名，可自定义clickable: true, // 点击小圆点，也可以滚动轮播图。默认falsetype: 'bullets', // 分页器样式类型，默认bullets 圆点样式bulletElement: 'span', // 设置小圆点的标签，默认为spanbulletClass: 'dot', // 修改小圆点类名，默认为swiper-pagination-bullet。// 如果修改了该类名，就要自己写相应的样式了bulletActiveClass: 'active', // 修改小圆点处于激活状态时的类名，默认为swiper-pagination-bullet-active
}
的使用
在vue3中使用。
安装：
yarn add
不能在vue2中使用，
原因是，在源码中，引入的8个vue方法都是vue3中的方法，在vue2中不存在。
如果在vue2中使用，会报错。
另外，vue3中使用，会有路径上的坑。
比如引入时，需要自己修改引入路径，不然会报错。
依照官方文档的引入方法为：
// Import Swiper Vue.js componentsimport { Swiper, SwiperSlide } from 'swiper/vue';// Import Swiper stylesimport 'swiper/css';
而这样的引入方式，vue会报错找不到引入的模块，
解决方法是，手动修改引入路径，
// Import Swiper Vue.js componentsimport { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';// Import Swiper stylesimport 'swiper/swiper.min.css';
正因为有这种坑，所以首选仍是6版本之前的版本。
而6以前的最后一个稳定版本就是5.4.5版本。也无需担心这种坑的问题。
