I am trying to put a big slider in the top of one of my pages. It should have some slides with a background picture, some text and pictures. The Slider itself has a 85VH height.
I would like one of the pictures on each slide, overflow it. So I have create an slide class and mark overflow as “visible”. I also did the same with the slider, but nothing happened. Then I have seen that I also have a Mask inside the slider and tried the same. I have crate a class for it so I can ensure that overflow is also “visible” on it and… bingo! Now the pictures overflow the slider.
But…something is wrong. As soon as I activate the overflow on the mask, the slides are now one beside the next one and when I preview the page it has a width as big as all slides together. It seems that the mask overflow give the slide vertical but also horizontal overflow and it breaks the slider somehow.
I have just created a demo with two pages an some pictures. The demo has two pages, one with the overflow activated on the mask (first one) and the other without it.
As you will see, in the first one the ipad picture overflow the slider, but you can scroll all the page to the right. In the second one, the ipad picture don’t overflow but you don’t hace the scroll to the right. I would like to have the second one working but with the overflow on the ipad picture.