swiper 分页器(pagination)不显示问题

东明兄 2023-01-31
0条评论 224 次浏览
东明兄 2023-01-310条评论 224 次浏览

在一个 react 项目中使用 swiper 实现 tab 切换效果,需要用到分页器,初始化 swiper 传入了 pagination 参数但是并没有生效,分页一直不显示,审查 swiper-container 元素发现是一个空的元素,分页并没有渲染。我使用的版本是8.4.6。

代码复现

js:

import { Swiper } from 'swiper';
import 'swiper/css';
useEffect(() => {
  swiperRef.current = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet(index: number, className: string) {
        return `${tabDataArray[index].title}`;
      },
    },
    loop: true,
    autoplay: true,
  });
}, []);

html:

1111
2222

解决方法:

import { Swiper } from ‘swiper’ 修改为 import { Swiper } from ‘swiper/swiper-bundle.esm.js’

参考issue:https://github.com/nolimits4web/swiper/issues/3768

本文通过 YUQUE WORDPRESS 同步自语雀

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注