在vue2中使用swiper

swiper

使用

1.npm下载安装swiper，现在swiper默认支持vue3，所以我们使用低版本

复制代码

npm install swiper@5.4.5

2.在需要用到的组件引入swiper

复制代码

import Swiper from "swiper"

3.在组件style中引入swiper插件的css（在node_modules找到Swiper包里边的css文件引入）

复制代码

@import "../../../node_modules/swiper/swiper-bundle.css";
//低版本引入css
@import "../../../node_modules/swiper/css/swiper.css";

4.在methods方法里面初始化swiper插件。

复制代码

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
    </div>
</div>
...
methods：{
    init () {
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,//可选选项，自动滑动
        })
    }
}
....
mounted(){
  this.init()    //防止swiper初始化不展示，在数据加载成功后(mounted中)调用
}

问题

1.分页器不显示

https://blog.csdn.net/weixin_42118522/article/details/107586363