Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member ChristianSprague's Avatar
    Join Date
    Dec 2015
    Posts
    16
    Member #
    52903

    What Is This Called and How Do I Make It?

    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
    Last edited by ChristianSprague; Dec 23rd, 2017 at 08:20 PM.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    What's your knowledge level with JavaScript?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member ChristianSprague's Avatar
    Join Date
    Dec 2015
    Posts
    16
    Member #
    52903
    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

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    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.
    Last edited by Ronald Roe; Dec 24th, 2017 at 07:07 PM.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 02:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com