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 !
Here is my public share link: LINK
(how to access public share link)
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,
@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 !
@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 ?
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
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 ? :)
@anthonysalamin, no only the slider parent is fixed here.
Yeah i’ve rebuilt it quickly, have a look at this
Hope this helps
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
@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 ?
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 ?
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.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.