React Swiper JS Controller

Question

I have a little problem with the controller in Swiper JS. I did exactly word for word as it is in the Swiper documentation, I didn't even change the names to make it work. I watched their tutorial and it still doesn't work. Anyone know what could be wrong? Thanks in advance for any answers. Documentation: https://swiperjs.com/react

Btw. Instead of names that I do not want to share I put "...."

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;

Answer 1

You're missing a prop called modules to pass the controller module

Official Documentation Example:

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>
    )
  }