Streaming live at 10am (PST)

Webflow Slider Arrows Not Working


#1

Hey there! My published sites Sliders aren’t working for some reason. When I click the arrows nothing happens but in the Webflow preview everything works fine. Click a tree using the cursor to open a slider. Appreciate any help on this !

Published site: https://xxxtentacion.webflow.io


Here is my site Read-Only: https://preview.webflow.com/preview/xxxtentacion?utm_source=xxxtentacion&preview=1a9df858bd865dbafab68bbccf5b6cd1


#3

Hi @tox

This is a known limitation with the Slider. Currently, if a slider loads on a page as display: none, the slider arrows don’t work.

Until the team resolves this issue, we do have a workaround you can use. Please reference Dave’s post here:


#4

Hi Brando,

I dont quite understand what you mean. The Sliders Im using are all display: block on page load, just the div they are contained in is display: none.


#5

Hi @tox

This issue will happen even if the slider’s parent elements are set to display:none on load, unfortunately.


#6

Hi Brando. Sorry to hijack but i am struggling with the same issue however none of the divs are set to display:none.

The sliders on the first work example function correctly, the sliders on the remaining work examples don’t? ‘Sliders are within the Work Section’

Any ideas or am I missing a trick?

Here is the staging and read-only link:

https://fountech.webflow.io/

https://preview.webflow.com/preview/fountech?utm_source=fountech&preview=14a3f3a4699b18014379305967d1fa75


#7

Hi @thinkrandom

I’m not able to find that page. It looks like these sliders are working as expected though:
CloudApp

CloudApp

Can you share the other page you are having trouble on?


#8

Hi Brando,

Thanks for your response. They are Divs of the same section - navigation is bottom right. I have opened a topic here and also a screen cast here which shows the slider functions not working.

Hope this helps, look forward to your response.

Darren


#9

Ah thanks for clarifying @thinkrandom.

It looks like there is an interaction that happens when you press Click for more. The box that’s initially hidden is being set to display:block. Because the slider is a child element of the box, the slider won’t work. This issue will happen even if the slider’s parent (the box) elements are set to display:none on load, unfortunately.

Can you please try implementing the above workaround I shared that Dave created? This should help resolve the issue.


#10

Hi Brando, thanks for the response.

Thanks for spotting this, makes sense now.

With regards to the workaround - not 100% sure how this works or that it is relevant as I have not used a javascript modal?

Any further hep on this would be appreciated.

Thanks

Darren


#12

Hi Brando,

Had a play and made some tweaks which seems to have enabled all the sliders to work.

Thanks for your help.

Darren


#13

Hi Brando,

Just to clarify, the issue only occurs when display: none is on page load. I got round this by adding this action to a element trigger and all is good.


#14

Nice, thanks for the info on this work around @thinkrandom :bowing_man:


closed #15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.