Streaming live at 10am (PST)

Fixed images in slider


#1

Hey everyone,

I´m experiencing some problems with fixing images on a full width slider on my homepage.

I want all the images on the slider to be fixed as the image on the first slide.

As you can see here https://webflow.com/design/line-systems?preview=bfd535d9f4b90f2a8668d20601f3c1cb1 the first slide works great as you scroll down, the secont doesn´t show up when fixed.

Any tips on why this is happening??

Tks guys.


#2

You have to enable the public link, check here.


#3

Sorry guys,my bad.

I think It´s enabled now https://webflow.com/design/line-systems?preview=98d871e38398b3119895fe8db76a5273

tks


#4

hi,

well, you have 2 solutions.

1 - I normaly don´t do the css sliders like this, i use 1 css per slide, i think this will fix your problem

2 - Remove the fixed background and it will work

P.S. - Go easy on the pixel size images, 3000 px is way to much


#5

Hello,

Tks for the reply but unfixing the second images doens´t do what I need.

If you select slide 1 and you scroll down, you can see the image is fixed. I want that effect for the other slides as you scroll down with them selected. Unfixing, won´t do the job.

Do you think there´s a way to achieve this?
tks


#6

Ok, got it.

Try to use 1 CSS per slide, instead of using > SLIDE > other CSS use just one per photo.

I think the problem is you are using on the first slide an image with 3000 px and a second with 1300px. I think the 2 css is getting configurations of the huge images you have on the first slide.

You can PM me im portuguese, i´m from Azores smiley


#7

Hey Rui,

Tks again for the reply.

I tried what you said (reduced pixel size, and only 1 css per image) but it still isn´t working as you can see on the public link.
Do you think there´s somtheing else I´m missing?

P.S. for some reason I couldn´t PM you


#8

Enable the public link again, i don´t have permission.


#9

Sorry, I dunno what´s happening, it should be enabled.

But anyways, it is enabled now. https://webflow.com/design/line-systems?preview=6d6eb266e35807e01e417cf2f3ff20f7


#10

Hi @dguerra, this is happening because browsers don't provide very good support for fixed backgrounds.

However, you can try this workaround to set the slider mask to fixed instead of the backgrounds.


#11

Cool, I think I manged to work around it.

Thank you very much


#12

This topic was automatically closed after 24 hours. New replies are no longer allowed.