Swiper: Thumbs in React is not working on version ^6.3.0

Created on 2 Oct 2020 · 8Comments · Source: nolimits4web/swiper

This is a (multiple allowed):

[x] bug

Swiper Version: 6.3.2
Platform/Target and Browser Versions: Possibly all plataforms

What you did

I followed exactly what Timo did in his video tutorial. But on my code it was not working, so i tryed to copy his code, and it still wasn't working... In last resource I downgrade to version 6.0.2, the same version that is used on the video, just after that the thumbs work perfectly. I don't know exactly version that broken between 6.0.2 - 6.3.2 but in the last version the Thumbs aren't working.

Expected Behavior

Thumbs to control the main carousel

Actual Behavior

Click in thumbs and nothing happens

Edit 08/12/2020

I've recorded an loom and create a codesandbox for this

React

Source

DCitalo

👍6 😕1

Most helpful comment

For me it seems like some bug in React, if you disable StrictMode it works.
Replace this:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

with this:

ReactDOM.render(
  <App />,
  rootElement
);

and everything works

nolimits4web on 11 Feb 2021

👍5

All 8 comments

can confirm the issue is still present in 6.3.3

spgwebdev on 13 Oct 2020

Yep still present in 6.3.3 here a codesandbox with the code.

I also did a little test and discovery that this feature still work in 6.2.0, but in 6.3.0 it is not.

DCitalo on 14 Oct 2020

@DCitalo I've used the master branch test and there's no problem.

ygj6 on 3 Dec 2020

@ygj6 I've used the master as well, as you can see in the codesandbox I posted in 14 Oct.
I've record a loom with the error, if you can see in the release 6.2.0 it was working but in the release => 6.3.0 it is not working:
https://www.loom.com/share/ad358f835c6d43bcae3632a5c2ae7ec6

Btw in the last release (6.4.0) it still not working

DCitalo on 8 Dec 2020

it doesn't work still in 6.4.1 :(

code-mat on 14 Dec 2020

👍1

I can confirm this issue still exists in 6.4.5, see https://github.com/valnub/swiper-react-demo/issues/4

As Swiper is open source let's have a look at the source code. There must have been a change which caused the problem somewhere between version 6.0.2 and 6.3.0. If we can find the problem maybe we can send in a PR to fix it.

valnub on 10 Feb 2021

👍1

For me it seems like some bug in React, if you disable StrictMode it works.
Replace this:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

with this:

ReactDOM.render(
  <App />,
  rootElement
);

and everything works

nolimits4web on 11 Feb 2021

👍5

For me it seems like some bug in React, if you disable StrictMode it works.
Replace this:
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);
with this:
ReactDOM.render(
  <App />,
  rootElement
);
and everything works

This worked for me