Overflow issues with slider (?)

[pepfs (Pepijn Steijger)]

I don’t have a great clue as to what’s going on, but a slider containing a form that was working perfectly before, has now stopped showing the slider contents.

This is the first slide’s content, I added the text blocks that have the class ID’s of the different wrappers as well, just for debugging purposes.

If you inspect element on my staging domain, it seems to be an issue with overflow? But I can’t figure it out.

Regards

PS.

There’s a piece of Javascript active that handles error messaging, but removing or deactivating it, doesn’t change the issues I am facing.

---

https://dashlyv1.webflow.io/quickscan

[jiyong]

Try changing your slider mask overflow to visible and the content should show.

[pepfs (Pepijn Steijger)]

Thanks, correct, changing .w-slider-mask overflow to visible enables the visibility of the slider’s content, but also makes the element show all slides, making the page infinitely wide, so that’s not a solution IMO. You can test it in console

Also good to note that weirdly enough this stopped worked after a week of running fine, so it literally happened over the weekend without me messing with it. That’s why it’s confusing

[jiyong]

Does the slider content show up properly and work as it should in the designer preview? If it does, then I suspect one of your custom script is messing with the behavior of the slider. Even with slider mask on overflow: hidden the content is shown when I reset the position for each slide.

I suggest to try removing all your scripts related to the slider and make sure the slider functionality works on vanilla, then sequentially add back parts of the code to see if the issue occur anywhere.

[pepfs (Pepijn Steijger)]

Thanks, what do you mean exactly by “when I reset the position for each slide.”

For argument’s sake I’ve removed all scripts, but the issue persists on my end (as mentioned, trying that earlier didn’t change anything for me)

[jiyong]

Do you mind sharing your read-only link if possible?

[pepfs (Pepijn Steijger)]

Sure, my bad for not doing that earlier: read-only

[jiyong]

Your slide change interaction is causing the content to have opacity: 0. When slider in view it should be Slide Change On interaction, and when slider out of view Slide Change Off interaction.

Swap your interactions and it should work.

[pepfs (Pepijn Steijger)]

Hi, thanks again, I swapped the interactions but still nothing

These sliders come straight out of the box from Flowbase and have been working all week. I really don’t think it has to do anything with this, although your reasoning sounds logical.

I also can’t fully recreate what you are seeing in your console. I see all my slides as having opacity: 1 whilst yours is showing opacity: 0.

Just has opacity: 1 for all slides

[jiyong]

Have you tried deleting the interactions completely and see if it was causing the issue?

Also, the interactions are targeting your content classes causing them to have opacity: 0 not your slide class.

Try removing all the interactions from the slides, publish and see if you could view the content and move the slider normally.

[pepfs (Pepijn Steijger)]

Sadly that didn’t do the trick yet. Do you have any other ideas?

[Stan (justAnotherDeveloper)]

[pepfs (Pepijn Steijger)]

Webflow natively sets slider mask overflow to hidden? I suppose this has something to do with the slider effect, I haven’t touched/altered it.

I don’t see this as a valid option (turning it to visible, auto, inherit, whatever) as the mask wrapper will just show all slides, extending page width indefinitely (like described above), or am I missing something?

Edit:

Nothing I do is doing anything so I’ll just rebuild the damn thing :')

The original is working with the exact same setup: https://form-ed74ad.webflow.io/, read-only

So confusing!