Scrolling down from an ion-slide

Looks like this is not an uncommon issue, but I could really use a fix if there’s a workaround.

I have a view with a slide box at the top displaying a number of images. Various bits of content are below the slide box, requiring the user to scroll down to see it all. Problem is, scrolling doesn’t work from a slide box.

I want to keep horizontal sliding enabled while having the whole page scroll vertically if the user swipes up or down from the slide box. On small devices, the slide box takes up the whole view, so if there isn’t a way to do this then I have a problem since users won’t be able to scroll at all.

Suggestions?

Can you put together an example of this?

I should have been more specific with my earlier description: the problem is not just due to the slide box, but using ion-content with each of the slides. But if ion-content isn’t used, the slider messes up when sliding variously sized images, as in the above pen. Remove ion-content from those slides and notice what happens. Scrolling then works, but the slides don’t.

Any update or suggestions on this?

Still in search of a solution. mhartington, you asked for an example; was my pen able to show anything?

Hey sorry about taking a while, been crazy busy! So I looked at your pen and came up with this solution.

Does this work for you?

No problem, I appreciate the help.

I’m afraid that doesn’t do it. I need to be able to scroll down the whole page - including the photo - even if the user swipes up and down on the photo itself.

As mentioned above, consider the situation when a user on a small phone gets to this view and the picture takes up the full vertical space. He can’t swipe above or below the picture since it’s offscreen, the only thing he can swipe is the picture itself, but swiping the picture does no good since it won’t scroll the page.

So there are two way to go about this. You original codepen, if you remove the ion-content from the image, change some css, you can scroll the entire content, including the image.

The other was you can have the slides independent from the content and scroll the text by it’s self.

Which way do you want?

1 Like

That first approach does the trick. When I tried the slider without using ion-content, it threw off the slides but I had my css wrong.