(SOLVED) Slides not displaying as expected when using Fixed background images on slides

[anthonysalamin]

Hi guys,

I’m trying to get a slider with two fixed background pictures (pulled from a CMS collection) to work but there is only one slide which seems to work as expected. The other slide has exactely the same settings, but has a grey overlay on it… when I un-cklick the “fixed position” setting, I can see the whole picture again but well… the picture isn’t fixed anymore like the first slide.

I made a small video to show you what I meant.
My read-only simplifed link is here

Thank you for any idea !
Anthony

---

Here is my public share link: LINK
(how to access public share link)

[zbrah]

Hey @anthonysalamin,

I’ve just recreated it quickly on a new project :
This is my structure (Basically, there is a fixed parent Div)

Slider is 100% height

And works as expected

However, when i do this on your site it doesn’t work.
Which is weird to me.
@Brando hey bro, do you think a refresh on his project could fix something ?
I’ve tried to do the exact same thing than me on his project (with new blocks, new classes) but it didn’t worked.
Am i missing something ?
Have both a great day,

[anthonysalamin]

@zbrah ! thank you for getting back at me
I did try what you suggested but with no luck so far.

I’d love to have the slider own the 100 % of the view height, exactely like this project i did, except on this project there is only the first slide that is fixed, the two others scroll up

Have a good day too !

[zbrah]

@anthonysalamin yeah, that would be 100vh height on Parent fix and top margin 100vh of the section bellow with this structure.

It works (try it on a blank project you ll see), but it seems your project does bug but i can’t understand why…
Do you have some custom code inside ?

[anthonysalamin]

Mmh, interesting, doesn’t work for me.
Did you actually add an image to the slide element and set its value to fixed position or not at all ?
I did set my parent-fixed div to 100VH and my slider element to 100VH but everything is scrolling.

@zbrah, do you maybe have a read-only link for me to have a look at ? :)

[zbrah]

@anthonysalamin, no only the slider parent is fixed here.
Yeah i’ve rebuilt it quickly, have a look at this
https://preview.webflow.com/preview/slider-3138c2?preview=6ef194fa15feb9d1a881eac30e63ae2a
Hope this helps

[Nita]

Hi @anthonysalamin,

Using fixed background images in the slider component will cause normal slider behavior to not work as expected, I would advise not to use fixed background images on slides.

The Slider widget is a scripted widget and does not take into account fixed background images.

Instead one could layer content in the slide using relative positioning on a slide “Wrapper Div” with and then later content in that div using absolute positioning of using fixed bg images/content.

I hope this helps

[anthonysalamin]

@zbrah, thank you it does work somehow ! clever technique.
Only thing is everything within the fixed parent is fixed, sliders controls, content etc…
Here is my result with your technique.

@Nita, thank you for stepping in ! I tried your technique but was unsuccessful sofar.
My read-only link with your technique @Nita can be found here
Might I be missing something ? Or should I follow your recomendations and give up fixed slider for good ?

Thank you

EDIT: I am thinking using interraction to move the image slightly towards bottom on scroll down trigger ! Could that be an idea or is it dirty trick ?

[anthonysalamin]

Yes ! Interraction works ! First time using on scroll animation and it gives some kind of parallax effect !
That is even better than what I could have expected Thank you all for your help !

I made a video here
And applied the effect on my real project here.

[system]

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