javascript - Why is two way Swiper JS control not working? - Stack Overflow

admin管理员组

文章数量:1389903

I am unable to get any kind of control going between 2 Swipers, however they are rendering as expected, just NO working controller functionality. A similar question has been asked and NOT yet answered here

I would like to get two way control, where sliding in either direction on any of the 2 Swipers results in an equivalent sliding on the other Swiper. My code is as follows:

import React, { useState } from 'react';
import SwiperCore, { Controller } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/ponents/controller/controller.scss';

import './styles.css';

// install Swiper's Controller ponent
SwiperCore.use([Controller]);

const App = () => {
  // store swiper instances
  const [firstSwiper, setFirstSwiper] = useState(null);
  const [secondSwiper, setSecondSwiper] = useState(null);

  const slides = [];
  for (let i = 0; i < 5; i += 1) {
    slides.push(
      <SwiperSlide key={`slide-${i}`}>
        <img
          src={`/id/${i + 1}/500/300`}
          style={{ listStyle: 'none' }}
          alt={`Slide ${i}`}
        />
      </SwiperSlide>
    );
  }

  const slides2 = [];
  for (let i = 9; i < 14; i += 1) {
    slides2.push(
      <SwiperSlide key={`slide-${i}`}>
        <img
          src={`/id/${i + 1}/500/300`}
          style={{ listStyle: 'none' }}
          alt={`Slide ${i}`}
        />
      </SwiperSlide>
    );
  }

  return (
    <>
      <Swiper
        onSwiper={setFirstSwiper}
        controller={{ control: secondSwiper }}
        slidesPerView={1}>

        {slides}
      </Swiper>

      <Swiper
        onSwiper={setSecondSwiper}
        controller={{ control: firstSwiper }}
        slidesPerView={1}>

        {slides2}
      </Swiper>
    </>
  );
};

export default App;

Any help is much appreciated!

I am unable to get any kind of control going between 2 Swipers, however they are rendering as expected, just NO working controller functionality. A similar question has been asked and NOT yet answered here

I would like to get two way control, where sliding in either direction on any of the 2 Swipers results in an equivalent sliding on the other Swiper. My code is as follows:

import React, { useState } from 'react';
import SwiperCore, { Controller } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/ponents/controller/controller.scss';

import './styles.css';

// install Swiper's Controller ponent
SwiperCore.use([Controller]);

const App = () => {
  // store swiper instances
  const [firstSwiper, setFirstSwiper] = useState(null);
  const [secondSwiper, setSecondSwiper] = useState(null);

  const slides = [];
  for (let i = 0; i < 5; i += 1) {
    slides.push(
      <SwiperSlide key={`slide-${i}`}>
        <img
          src={`https://picsum.photos/id/${i + 1}/500/300`}
          style={{ listStyle: 'none' }}
          alt={`Slide ${i}`}
        />
      </SwiperSlide>
    );
  }

  const slides2 = [];
  for (let i = 9; i < 14; i += 1) {
    slides2.push(
      <SwiperSlide key={`slide-${i}`}>
        <img
          src={`https://picsum.photos/id/${i + 1}/500/300`}
          style={{ listStyle: 'none' }}
          alt={`Slide ${i}`}
        />
      </SwiperSlide>
    );
  }

  return (
    <>
      <Swiper
        onSwiper={setFirstSwiper}
        controller={{ control: secondSwiper }}
        slidesPerView={1}>

        {slides}
      </Swiper>

      <Swiper
        onSwiper={setSecondSwiper}
        controller={{ control: firstSwiper }}
        slidesPerView={1}>

        {slides2}
      </Swiper>
    </>
  );
};

export default App;

Any help is much appreciated!

• javascript
• reactjs
• swiper.js

Share Improve this question Follow edited Dec 28, 2020 at 18:18 AgentAnon asked Dec 28, 2020 at 17:47 AgentAnonAgentAnon 7311 gold badge33 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

In case anyone else runs into this, and is simply using Vanilla JS:
See: https://swiperjs./swiper-api
Specifically:

Controller Methods Properties swiper.controller.control Swiper

Pass here another Swiper instance or array with Swiper instances that should be controlled by this Swiper

firstSwiper.controller.control = secondSwiper;  
secondSwiper.controller.control = firstSwiper;

Would be the appropriate syntax for two-way control.

So apparently there is NO issue with the code, rather the controller implementation as is does NOT work on version [email protected], I've tested it on an earlier version [email protected] and it works fine.

Using React, you can use useRef and useLayoutEffect like this:

import React, { useLayoutEffect, useRef } from "react";
// Import Swiper React ponents
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import "./styles.css";

// import required modules
import { Pagination, Navigation, Controller } from "swiper";

export default function App() {
  const swiper1Ref = useRef();
  const swiper2Ref = useRef();

  useLayoutEffect(() => {
    swiper1Ref.current.controller.control = swiper2Ref.current;
    swiper2Ref.current.controller.control = swiper1Ref.current;
  }, []);

  return (
    <>
      <Swiper
        onSwiper={(swiper) => {
          swiper1Ref.current = swiper;
        }}
        slidesPerView={1}
        spaceBetween={30}
        loop={true}
        pagination={{
          clickable: true
        }}
        navigation={true}
        modules={[Pagination, Navigation, Controller]}
        className="mySwiper"
      >
        <SwiperSlide className="slide">Slide 1</SwiperSlide>
        <SwiperSlide className="slide">Slide 2</SwiperSlide>
        <SwiperSlide className="slide">Slide 3</SwiperSlide>
      </Swiper>
      <Swiper
        onSwiper={(swiper) => {
          swiper2Ref.current = swiper;
        }}
        slidesPerView={1}
        spaceBetween={30}
        loop={true}
        pagination={{
          clickable: true
        }}
        navigation={true}
        modules={[Pagination, Navigation, Controller]}
        className="mySwiper2"
      >
        <SwiperSlide className="slide">Slide 1</SwiperSlide>
        <SwiperSlide className="slide">Slide 2</SwiperSlide>
        <SwiperSlide className="slide">Slide 3</SwiperSlide>
      </Swiper>
    </>
  );
}

Demo: https://codesandbox.io/s/swiperjs-two-way-control-mzvudu

本文标签： javascriptWhy is two way Swiper JS control not workingStack Overflow