CODEWITHSUNDEEP
reactjsnext.js
java-beginner-123
java-beginner-123

Reputation: 21

Why is my React swiper working properly on localhost but not present on production site?

I am using react swiper from 'swiper/react' for multiple components on my website and it works fine for every component it is used for except for one page. I have a top nav bar that is used as a promotional text banner and it swipes using autoplay every 5 seconds. This navbar exists on every page of my website, it works fine on every page except for one. The problem I'm having trouble shooting is because the swiper works fine on localhost, but once pushed to production, the swiper on this page is barely shown. You can see in the image below, that 2 characters in the swiper are present, and you can see in this image that the swiper is working as expected on every other page.

NOTE: On refresh, the full text is present for about a second before it is skewed and hidden.

The wrapper component styles are positioned to sticky, has a set height, a larger z-index than its background, display is flex. The swiper modules include Navigation and autoplay, loop is set to true, slidesPerView = 1.

What could be causing it to work locally but not work when deployed to a server? Any ideas as to why this functionality is present?

If you need more information please don't hesitate to let me know. Thanks for any advice in advance.

Upvotes: 2

Views: 739

Answers (1)

Lazar Nikolov
Lazar Nikolov

Reputation: 1028

This looks like a CSS issue to me. What do you use for styling? Also, what's different between your localhost styles and the production styles? Note the differences and try to figure out what's missing, if you're not willing to share your code. I've seen cases (especially when using Tailwind) of missing styles in production because a certain plugin removes part of the styles that it thinks that are not used. Those cases are solved by whitelisting certain classes, but I can't tell for sure because I don't know your tech stack.

Upvotes: 1

Related Questions