I could remember I had this problem, but in a Vanilla JS project, not React.

The source of the problem was the fact that Swiper must take a unique DOM element to be initialized.

Look at the initial part:

https://swiperjs.com/get-started#initialize-swiper

So imagine on a page, you have two or three Swipers.

If you use the ".swiper" class for all the Swipers on the page, you would face these kinds of problems:

• One Swiper won't work (like your problem),

• Maybe multiple Swipers work simultaneously.

• They are not independent, because they are all initialized by the same DOM element (.swiper).

  Summary:

  I know the thing I said is not React-based, but the system of Swiper works like this: Each Swiper, a unique DOM element.