问题描述

初次使用swiper并且直接使用最新版本8.15, 根据相关文档描述使用方法关键代码如下：

// 引入swiper (我使用的是npm版)
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper-bundle.min'

// 导入Swiper构造函数
import Swiper from "swiper";
//这一步是我把Swiper配置对象单独放进一个文件并且导入
import config from "./config";

//实例化Swiper
new Swiper('.swiper', config)

此时Swiper已可使用,但是分页器并不显示.

解决方案：

最后发现新版Swiper默认只导出核心部分, 需要如导航、分页等组件的话需要另外导入.并使用Swiper.use()添加.

import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper-bundle.min'

//修改了下面这行代码
import Swiper, {Navigation, Pagination} from "swiper";
import config from "./config";

//新加了下面这行代码
Swiper.use([Navigation, Pagination]);
new Swiper('.swiper', config)