SwiperJS Link Issue
Hi,
I created a swiper with SwiperJS, but i notice there is an issue with a link to the current service..
https://addmorex7am2023.webflow.io/ --> Scroll down to services.
For example; if you click on 'business party', you will go to https://addmorex7am2023.webflow.io/services/livestream
I set the link to go to the current service but it doesn't work.. It only works if i swipe 4 times and after that i can go to the current service.
Anyone a idea what to do?
https://preview.webflow.com/preview/addmorex7am2023?utm_medium=preview_link&utm_source=designer&utm_content=addmorex7am2023&preview=d27a2a96cf6f05c6ee1c4336d8db97f3&workflow=preview
14 Replies
@dinomurselovic there are a few issues causing conflict.
The Swiper fade effect you are using causes swiper to execute some CSS to "stack" the slides on top of each other. As such, the link for the last slide (live stream) is the one ending up highest in the stacking order.
This is a tough one to troubleshoot. I would start by:
1. Remove the Swiper
fade effect (for now).
2. Set image loading to eager
Once you have done that, does the linking work?@Web Bae Yep, the linking does work that way. But ofc not the effect that i want to have haha
My guess is that the swiper fade CSS is clashing with the CSS you wrote in the head of your project.
Here's the Swiper CSS: https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.css
I attached an image of the CSS in your project.
If you add the fade effect back and remove this CSS from your file, does it work?
oooooo I think I see
hahaha what is it!
you renamed your active class to is-active
but the swiper CSS uses .swiper-slide-active
this is the swiper css for the fade effect
DUDE
ARGH
Thanks so much man
add this css
you got it working?
Yeppp
yea - working around the swiper CSS can be really irritating
nice site! Keep up the awesome work
Thanks a lot man! 😄
Ahh sorry man, i actually forgot to put the fade effect back.. thats why it did work (1AM already here) hahah @Web Bae
I have it working here with fade effect and changing your css to the bit I sent. Still not on your end?
Ah i see, had to remove this css and added your css
.swiper-fade .swiper-slide{
pointer-events: auto !important;
}
Now it works 🙂
So thanks!!