reactjs - Swiper 7 无法让模块工作（分页）

Question

我试图使用 Swiper React 并且无法让 Swiper 模块正常工作（特别是分页）。

刷卡器版本：7.0.8

代码

import { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import React, { FC } from "react";

import css from "./sideScrollSlider.module.scss";

import "swiper/swiper.scss";
import "swiper/components/pagination/pagination.scss";

export interface ISideScrollSlider {}

const SideScrollSlider: FC<ISideScrollSlider> = ({
}) => {
    return (
        <div className={css.wrapper}>

            <Swiper
                modules={[Pagination]}
                className={css.swiperWrapper}
                spaceBetween={16}
                pagination={{ clickable: true }}
                loop={true}
                loopAdditionalSlides={2}
                createElements={true}
            >

                <SwiperSlide>
                    <div className="p-12 bg-gray-200">
                        <div className={css.slideWrapper}></div>
                    </div>
                </SwiperSlide>
                <SwiperSlide className={css.SwiperSlide}>
                    <div className="p-12 bg-gray-200">
                        <div className={css.slideWrapper}></div>
                    </div>
                </SwiperSlide>
                <SwiperSlide className={css.SwiperSlide}>
                    <div className="p-12 bg-gray-200">
                        <div className={css.slideWrapper}></div>
                    </div>
                </SwiperSlide>

            </Swiper>
        </div>
    );
};

export default SideScrollSlider;

这是输出

我还注意到 modules 属性被渲染到 DOM 中，这可能是问题的提示。

有谁知道解决这个问题？

标签： reactjsswiper