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.
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.
So everything looks like it is going okay on my vscode but on my app display, it doesnt look it. so i installed react bootstrap and i copied a navbar but the display on the app isnt showing properly. please see attachments.[[enter image description here](https://i.stack.imgur.com/vu72C.png)](https://i.stack.imgur.com/FXFY2.png).
please what do i do to sort this issue out? thank you very much.
I copied a navbar from react bootstrap and i think i made the necessary adjustments. i was expecting a dark navbar bg='dark' variant='dark' but i got nothing.
I've been trying to implement the temporary drawr on my project together with the responsive and elevated app bar, the responsiviness is working right but the transition of the drawer is gone, aswell as the hover effect of the list items the link how the header of my project is right now
I've tried to search but none of the results helped me.
Thanks in advance!
React Font-Awesome
I trying to use it so many times but I can't only
example icon is working another icon is not working
I need some examples except the faCoffe example
please help...
Hi I am using svg sprite I created using icons8 website for all my website icons, and the icons are working but it seems that the website loads them more than once per page (if i open the network tab i can see it loaded twice or more). I have been looking for a solution for a while now and I cant seem to find the cause of this.
I work with react so I have a component for Icon which uses the tag with xlinkHref attribute.
did anyone encounter such behavior? if yes what would be the best way to approach a solution?