React Swiper JS 控制器答案

【问题标题】：React Swiper JS ControllerReact Swiper JS 控制器
【发布时间】：2021-03-28 17:22:42
【问题描述】：

我对 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;

【问题讨论】：

标签： javascript reactjs swiper swiperjs

【解决方案1】：

您缺少一个名为 modules 的道具来传递控制器模块

官方文档示例：

const App = () => {
    // store controlled swiper instance
    const [controlledSwiper, setControlledSwiper] = useState(null);

    return (
      <main>
        {/* Main Swiper -> pass controlled swiper instance */}
        <Swiper modules={[Controller]} controller={{ control: controlledSwiper }} ...>
          {/* ... */}
        </Swiper>

        {/* Controlled Swiper -> store swiper instance */}
        <Swiper modules={[Controller]} onSwiper={setControlledSwiper} ...>
          {/* ... */}
        </Swiper>
      </main>
    )
  }

【讨论】：