Streaming live at 10am (PST)

Slideshow with an overflow image


#1

Did some searches but haven't found a resolution to this issue.

I'm trying to create a slideshow with slides that have an overflow image.

When I set the Slide Mask to overflow = visible, the overflow image appears fine but then slides 2 and 3 are visible off the screen and the browser can scroll horizontally which I don't want.

Preview link with slideshow on homepage - https://preview.webflow.com/preview/good-service-guide-6c4fea?preview=b317c0e2bcebd3422f3c749fc7ba622e

Slides can scroll horizontal example -

Thanks in advance!


#2

From what I see you figured it out already. Is it correct?


#3

Nope. Haven't figured it out yet.

The image overflows the slide, yes. But now slides 2 and 3 also show so the user can scroll left and right horizontally, not what I want.


#4

Ok, got it.

So, you have 2 ways to fix this:
1) add the code snippet to the head part of the custom code area

<style>
.slidemask {
     overflow-x: hidden;
 }
</style>

2) Give to slider itself some height (I tried 375px, seems work pretty good), add top padding (about 50-60px)

Cheers,
Anna


#5

Thanks Sabanna.

The 1st option didn't work for me but I was able to resolve using the 2nd option.

I also had to set slide show background to transparent and give it bottom margin equal to the top padding I added.

Appreciate the help!


#6

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