Scrolling Horizontally through a row of images

Jon shared this question 2 years ago
Answered

I'm trying to add a row of images that extend beyond the edges of the screen in my prototype. I added them to a dynamic panel and set the panel to "Automatic" in Horizontal Scroll but when I simulate, the images are there but there is no scroll functionality. I've tried many different ways and nothing works. Any ideas?

Best Answer
photo

To scroll through a row of images, select them all on the Canvas and then right-click and select 'group in dynamic panel'. Resize the panel to be the screen width, and then change horizontal overflow to be 'scroll always'. Check out the attached prototype to see how this works.

Comments (6)

photo
1

Hi Jon,


In order to provide you the best solution, can you please share with me the example you've created via Dropbox/Wetransfer here?


Best,


Sonia Durán

photo
1

Sure thing.


Here is a link to a basic example of what I'm trying to do.


https://we.tl/A5N0lWjG5N


As I mentioned, I want to be able to drag the list left or right and tap on the images to open a new screen. However, when I drag the list, I only want that row to scroll left or right, not the entire screen.


This is exactly how the iOS app store's Featured section works.


Thank you for your time

photo
1

https://we.tl/A5N0lWjG5N and I added more info in the comment below this. Thank you again

photo
1

Hi Jon,


You just need to include the images inside a dynamic panel and activate the horizontal scroll. Also you need to create an event "On tap/Link to" in order to link the images with the screens. (See the example attached)


https://www.dropbox.com/s/o4jt0dfucox...


Kindly let me know how it goes.


Best,


Sonia Durán

photo
1

That works. Thank you very much for your help :)

photo
1

To scroll through a row of images, select them all on the Canvas and then right-click and select 'group in dynamic panel'. Resize the panel to be the screen width, and then change horizontal overflow to be 'scroll always'. Check out the attached prototype to see how this works.