Typical e-commerce image carousel

💬 App Building
1

I was looking to build a typical e-commerce image carousel similar to what can be found on Amazon for a procurement application. Amazon.com: Liberty Garden 304 Explorer Two Wheel Hose Reel Cart, Aluminum, Holds 250-feet of 5/8" Hose

I was wondering if there were any suggestions on how to go about this. I could do this with a custom component from some prebuilt react components (I'm assuming MUI is compatible with Retool) or I could just use a horizontal list component and some custom javascript and CSS.

Its such a common pattern I would like not to reinvent the wheel. . .

2

Hey @benjaminfortunato,

You can definitely use a horizontal list view. The container component has a "hovered" property that you can use to then dynamically select the main image (and also give effects to the container's margin):

image
image367×586 25.1 KB

1 Like
3

Hi @benjaminfortunato Curious to hear more about your use case if you're willing to share. Are you building an app for e-commerce?

1 Like
4

I was curious about this, so I went on an made a quick tutorial on how to achieve this:

1 Like
5

Amazing!! Great tutorial, @MiguelOrtiz

1 Like
6

Thanks for putting this together!