一.下载
npm:
npm install swiper --save
yarn
yarn add swiper
二.引入
因为是一个页面使用,所以局部引入啦
在script引入:
import Swiper from 'swiper'
在style引入:
(此处是5.4.5版本的css路径)
@import "../../node_modules/swiper/css/swiper.css";
三.页面使用
mounted () {
this.initSwiper()
},
methods: {
initSwiper () {
new Swiper('.swiper-container', {
loop: true,
slidesPerView: 4,
autoplay: {
delay: 1000
} ,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
}
}
但是自动播放,前进退按钮一直没有起作用,折腾了几天,查了好久的资料,还是没有作用。
最后,居然是版本问题!!!!
因为直接下载swiper,我默认下载的版本是6.2.1
我遇到的这种情况,卸载swiper,安装低版本
npm install swiper@5.4.5
yarn add swiper@5.4.5
网上说这个版本兼容性是最好的,唉,总算解决啦~~~
希望能帮到你哦~~