What Is This Called and How Do I Make It?

[ChristianSprague]

Hello, I'm interested in understanding what the scrolling item "menu" on this website would be called. I haven't found any information on it and I wanted to see if anyone knew any information about it.

Website:
http://www.asos.com/men/

Functionality:
I'm looking to add a background image and a color overlay of that image with horizontal 'scrolling' products (like the one in the website). If anyone knows of something like this for shopify that would be a bonus.

question.jpg

[Ronald Roe]

What's your knowledge level with JavaScript?

[ChristianSprague]

I know some javascript but I generally don't like to use it if I can. What were some of your thoughts?

Best regards,
Christian Sprague

[Ronald Roe]

You're going to have to use JavaScript. Use CSS to arrange them in the line. Create a container and set its width. Create an inner container around the images. Float all of the images to the left, and give them a right margin to create the spacing.

Use JavaScript to get the width of the images. Create a function that shifts the left position of the inner container (-1) * (img width + right margin). Bind that to the right arrow on the right side of the carousel. Do the same with a left arrow on the left side, but shift the left positioning the opposite way (positive).

I would also programmatically set the right margin of the images so that you don't have a partial image on the right side.

It's possible to use some funky CSS trickery to do this without JS, but you'll spend more time making that work than you would just taking the time to write the JS.