我对 Swiper JS 中的控制器有点问题。 我完全按照 Swiper 文档中的内容逐字逐句地做了，我甚至没有更改名称来使其工作。我看了他们的教程，但它仍然不起作用。有人知道可能出了什么问题吗？ 提前感谢任何答案。 文档： https://swiperjs.com/react

顺便说一句。我把我不想分享的名称替换为“....”

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, {
    Autoplay,
    Mousewheel,
    Keyboard,
    Controller,
    EffectCoverflow,
    EffectFade,
} from 'swiper';
import ....
import ....
import ....

// Import Swiper styles
import 'swiper/swiper-bundle.css';

SwiperCore.use([
    Autoplay,
    Mousewheel,
    Keyboard,
    Controller,
    EffectCoverflow,
    EffectFade,
]);

const WorkSlider = () => {
    const ....Review = () => {
        return (
            <p>
                ....
            </p>
        );
    };

    const ....Review = () => {
        return (
            <p>
                ....
            </p>
        );
    };

    const ....Review = () => {
        return (
            <p>
                ....
            </p>
        );
    };

    const [firstSwiper, setFirstSwiper] = useState(null);
    const [secondSwiper, setSecondSwiper] = useState(null);
    const slides = [....Img, ....Img, ....Img];
    const reviews = [....Review, ....Review, ....Review];

    for (let i = 0; i < 3; i += 1) {
        slides.push(
            <SwiperSlide key={`slide-${i}`} tag="li">
                <img src={slides[`${i}`]} alt={`Project ${i}`}></img>
            </SwiperSlide>
        );
    }

    for (let i = 0; i < 3; i += 1) {
        reviews.push(
            <SwiperSlide key={`review-${i}`} tag="li">
                {reviews[`${i}`]}
            </SwiperSlide>
        );
    }

    return (
        <>
            <Swiper
                wrapperTag="ul"
                id="workSliderImg"
                direction="vertical"
                onSwiper={setFirstSwiper}
                controller={{ control: secondSwiper }}
                // autoplay={{ delay: 4000 }}
                mousewheel={{ enabled: true }}
                keyboard={{ enabled: true }}
                loop={{ enabled: true }}
                effect="coverflow"
                coverflowEffect={{
                    rotate: 50,
                    stretch: 0,
                    depth: 100,
                    modifier: 1,
                    slideShadows: false,
                }}
            >
                {slides}
            </Swiper>
            <Swiper
                wrapperTag="ul"
                id="workSliderReviews"
                onSwiper={setSecondSwiper}
                controller={{ control: firstSwiper }}
                direction="vertical"
                loop={{ enabled: true }}
                effect="fade"
            >
                {reviews}
            </Swiper>
        </>
    );
};

export default WorkSlider;