Streaming live at 10am (PST)

Webflow Slider Issue


#1

Hey there,

My goal is to have a 4 slide fade out-in animation upon site load.

The first being just a background image, the next three background image with text box, and the final frame the logo lockup, subhead, and RSVP button you see currently in place.

The final frame is all set - and works well on all devices, portrait and landscape - I just need to add the other 4 slides and finalize the order and timing.

Issue 01
Currently, when I add another slide in the slider and set the background image, nothing appears but a grey box in the website builder and the io link. (added one extra slide to show as example)

Issue 02
In the website builder, when I add another slide, it seems to add the new slide container below my current container - and it does not display the image, or making adding a header object possible.

Issue 03
I currently have the slider container height set to 100% - If i use any variation of vh sizing, the landscape on an iPad and phone either cuts off the top section or it overlaps the rest of the content. (Not sure if percentage or vh sizing effects the way that the slider works.)

Hope this is enough clear info - happy to answer any clarifications.



#2

Just starting to look into this and noticed that your main Slider element is set to be 100% height of the body. This may be a place to start. Pics to follow.


#3

Here are the settings I used for each element.


#4

About to pass out for the night but let me know if this helps.


#5

Thank you! The flex layout definitely solved the issue - now it presented the issue of not showing up on mobile devices.

Think it is due to the slider set to 100%? If I use vh i have issues with tablet and mobile landscape...


#6

Issue resolved - 100% view height works fine - had to reduce the size of the background image to 2000px (which it should have been from the beginning) and make sure no slides were hidden.

Also a bit of a weird bug in the platform but when duplicating slides sometimes you have to refresh your browser page for the image to show up properly.

Thanks for the help - cheers!


#7

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