swiper-thumbs-gallery-loop-react not working in react js

Question

I'm facing an issue I want to create a swiper thumb gallery slider. the issue is that when I copy code from swiper js and paste it into my react app it's not working and getting an error called The above error occurred in the component: while the same code is working in the code sandbox. Please help me to create the gallery thumb slider.

import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";



// import required modules
import { FreeMode, Navigation, Thumbs } from "swiper";

 function App () {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <>
      <Swiper
      
        loop={true}
        spaceBetween={10}
        navigation={true}
        thumbs={{ swiper: thumbsSwiper }}
        modules={[FreeMode, Navigation, Thumbs]}
        className="mySwiper2"
      >
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-7.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-9.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-10.jpg" />
        </SwiperSlide>
      </Swiper>
      <Swiper
        onSwiper={setThumbsSwiper}
        loop={true}
        spaceBetween={10}
        slidesPerView={4}
        freeMode={true}
        watchSlidesProgress={true}
        modules={[FreeMode, Navigation, Thumbs]}
        className="mySwiper"
      >
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-7.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-9.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-10.jpg" />
        </SwiperSlide>
      </Swiper>
    </>
  );
}

export default App;

score 2 · Answer 1 · answered Nov 12 '22 at 15:19

This is the final solution for this problem

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

import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import SwiperClass from "swiper/types/swiper-class";
import SwiperCore, { FreeMode, Navigation, Thumbs, Controller } from "swiper";

export default function AdSwiper() {
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperCore>();
  const [firstSwiper, setFirstSwiper] = useState<SwiperClass>();
  const [secondSwiper, setSecondSwiper] = useState<SwiperClass>();
  const swiper1Ref = useRef<React.MutableRefObject<null>>(null);
  const swiper2Ref = useRef();

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

  return (
    <div className="h-[550px] ">
      <Swiper
        onSwiper={(swiper) => {
          if (swiper1Ref.current !== null) {
            swiper1Ref.current = swiper;
          }
        }}
        preloadImages={false}
        controller={{ control: secondSwiper }}
        spaceBetween={10}
        slidesPerView={1}
        grabCursor={true}
        navigation={true}
        thumbs={{
          swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
        }}
        modules={[FreeMode, Navigation, Thumbs, Controller]}
        className="w-[848px] h-[454px] rounded-xl"
      >
        <SwiperSlide>
          <img src="https://a.d-cd.net/9634e6s-960.jpg" />
        </SwiperSlide>

        <SwiperSlide>
          <img src="https://a.d-cd.net/a5634e6s-960.jpg" />
        </SwiperSlide>

        <SwiperSlide>
          <img src="https://a.d-cd.net/13634e6s-960.jpg" />
        </SwiperSlide>

        <SwiperSlide>
          <img src="https://a.d-cd.net/e3634e6s-960.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="http://carsot.com/images/daewoo-nubira-ii-1999-2003-sedan-interior-2.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.4tuning.ro/images/elemente-caroserie-din-dezmembrari-daewoo-nubira/elemente-caroserie-din-dezmembrari-daewoo-nubira-8fd6c1475ef586f2cf-1100-615-2-85-1.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://a.d-cd.net/5283186s-480.jpg" className="w-full" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://a.d-cd.net/JCAAAgGDAuA-960.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://a.d-cd.net/a5634e6s-960.jpg" />
        </SwiperSlide>
      </Swiper>
      <Swiper
        controller={{ control: firstSwiper }}
        loop={false}
        spaceBetween={10}
        slidesPerView={8}
        watchSlidesProgress
        touchRatio={0.2}
        preloadImages={false}
        lazy
        slideToClickedSlide={true}
        onSwiper={setThumbsSwiper}
        modules={[Navigation, Thumbs, Controller]}
        className="h-[100.4px] w-[848px] mt-[20px] rounded-xl"
      >
        <SwiperSlide className="w-[70px]">
          <img
            src="https://a.d-cd.net/9634e6s-960.jpg"
            className=" rounded-xl  h-[70px]"
          />
        </SwiperSlide>
        <SwiperSlide className="w-[70px]">
          <img
            src="https://a.d-cd.net/a5634e6s-960.jpg"
            className=" rounded-xl  h-[70px]"
          />
        </SwiperSlide>
        <SwiperSlide className="w-[70px]">
          <img
            src="https://a.d-cd.net/13634e6s-960.jpg"
            className=" rounded-xl  h-[70px]"
          />
        </SwiperSlide>
        <SwiperSlide className="w-[70px]">
          <img
            src="https://a.d-cd.net/e3634e6s-960.jpg"
            className=" rounded-xl  h-[70px]"
          />
        </SwiperSlide>
        <SwiperSlide className="w-[70px]">
          <img
            src="http://carsot.com/images/daewoo-nubira-ii-1999-2003-sedan-interior-2.jpg"
            className=" rounded-xl  h-[70px]"
          />
        </SwiperSlide>

        <SwiperSlide className="w-[70px]">
          <img
            className=" rounded-xl  h-[70px]"
            src="https://www.4tuning.ro/images/elemente-caroserie-din-dezmembrari-daewoo-nubira/elemente-caroserie-din-dezmembrari-daewoo-nubira-8fd6c1475ef586f2cf-1100-615-2-85-1.jpg"
          />
        </SwiperSlide>
        <SwiperSlide className="w-[70px]">
          <img
            className=" rounded-xl  h-[70px]"
            src="https://a.d-cd.net/5283186s-480.jpg"
          />
        </SwiperSlide>
        <SwiperSlide className="w-[70px]">
          <img
            className=" rounded-xl  h-[70px]"
            src="https://a.d-cd.net/JCAAAgGDAuA-960.jpg"
          />
        </SwiperSlide>
        <SwiperSlide className="w-[70px]">
          <img
            src="https://a.d-cd.net/a5634e6s-960.jpg"
            className=" rounded-xl  h-[70px]"
          />
        </SwiperSlide>
      </Swiper>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Nov 15 '22 at 12:26
I'm also struggling to get this React library to work and wondering if you have a more complete example. I noticed you're making use of firstSwiper and secondSwiper in your code, but not setFirstSwiper and setSecondSwiper -- did you end up replacing these with refs? — M Miller, May 16 '23 at 23:32
I'm so grateful for your help! You're my hero! I spent 4 hours trying to fix my Next.js swiper bugs, but ChatGPT couldn't help me. You're a lifesaver! — Shahriyor Sharifjonov, Jul 22 '23 at 16:29

score 1 · Answer 2 · answered Jun 27 '23 at 17:42

1

jarikus, thanks, your code worked for me on React

thumbs={thumbsSwiper ? { swiper: thumbsSwiper } : undefined}

answered Jun 27 '23 at 17:42

Кирилл Эсаулов

11
1

Кирилл Эсаулов, please don't add _thanks_ as answers. They don't actually provide an answer to the question, and can be perceived as noise by its future visitors. Once you [earn](//meta.stackoverflow.com/q/146472) enough [reputation](/help/whats-reputation), you will gain privileges to [upvote answers](/help/privileges/vote-up) you like. This way future visitors of the question will see a higher vote count on that answer, and the answerer will also be rewarded with reputation points. See [Why is voting important](/help/why-vote). – Yunnosch Aug 05 '23 at 07:03
Quoting all of the code of a solution given in an existing answer gives a very odd feeling. Do you contribute anything new which would be a good reason to add this post at all? – Yunnosch Aug 05 '23 at 07:05

score 0 · Answer 3 · edited Aug 27 '22 at 07:18

0

use this

<BrowserRouter>
   <App />
</BrowserRouter>

instead of

<React.StrictMode>
  <BrowserRouter>
      <App />
  </BrowserRouter>
</React.StrictMode>

edited Aug 27 '22 at 07:18

Markus Meyer

3,327
10
22
35

answered Aug 23 '22 at 07:17

CHAUDHRY WAQAS

1

Will chek it if is it working or not By the way thanks for your time. – Mithlesh Patel Aug 25 '22 at 12:19

score 0 · Answer 4 · answered Aug 26 '22 at 03:16

0

Is it working in react? What about next js?

answered Aug 26 '22 at 03:16

Ashwin Garg

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 31 '22 at 06:05

score 0 · Answer 5 · edited Jun 06 '23 at 00:23

0

Solution for next.js:

thumbs={thumbsSwiper ? { swiper: thumbsSwiper } : undefined}

edited Jun 06 '23 at 00:23

Jeremy Caney

7,102
69
48
77

answered Jun 05 '23 at 12:23

jarikus

1

1

But the question was for React. Why are you answering for Next? – Jeremy Caney Jun 06 '23 at 00:23

swiper-thumbs-gallery-loop-react not working in react js

5 Answers5