How to make horizontal scroll regions on a page and link photos from a DB

Hi, I have a mocked up page below. I would like to set something up like this in Wappler. The idea would be to have each horizontal category section scroll to the right or left like a photo roll or slideshow.

I’m not sure how to set this up or place the arrow controls (in red circled areas in photo). I’m also unclear on how to pull images from my database into the placeholders on the page. Ultimately the images would be anchor images so when clicked the user would jump to a page that had more detailed info and photos for making that pizza (from a DB).

I have not seen any info on this type of setup in the Wappler docs and I’m not sure what to search for in the DMX area.

Any help would be appreciated.

An example of something like what I’m talking about is below - this is from amazon - the pictures could just end or be in a loop so as you reach the last picture the first picture would just show up again. Like a ring…

I think I can figure out the database part (or just start with some stuff in a folder) but unsure how to get the arrows and pictures on a loop. I’m assuming after one is done I could just duplicate it (one of the nice things about Wappler!)

I have played around with slideshow, but it does not seem to allow more that one image in view at a time. Is what I’m trying to do impossible in Wappler?

Hello Norm,
The looping part requires some kind of carousel functionality, which is indeed not available in the slideshow, but that’s a great idea for a new component.

What you try to achieve (except for loping) can be done using a paged database query, which repeats 4 records per page and add two custom buttons with dynamic attributes to change prev/next pages. Adding nice fade in / out animations to the repeat region elements will make it look great.

So something like this, but instead of the paging below repeat region you just add two simple buttons for next/prev:

1 Like

I think this would be a great component to add. It’s a feature which appears on many ecommerce and other sites displaying products. Something like this:

… ideally linking to a lightbox, would be a really useful feature (a rather more basic version would do).

DMXZone used to have a really nice extension with similar features. I used it on a site long ago (it was Flash-based).

Thanks Teodor, agree TomD - it would be fantastic to have organic within Wappler! Magic toolbox looks really nice…