skip to Main Content

I am relatively new to coding and I am looking to re-create this http://prntscr.com/e73jze which I designed in Photoshop. Could anyone give me the simplest way to make this?

Many thanks

2

Answers


  1. Based on your included photo, exactly matching the styling of this design will not have a simple answer. To make a simple <div> with horizontally scrollable content, you could do something like this:

    #wrapper {
      display:flex;
      flex-wrap:none;
      height:200px;
      width:100%;
      background-color:black;
      overflow-x: scroll;
      }
    
    .photo-box {
      flex:0 0 auto;
      margin:25px;
      background-color:white;
      width:300px;
      height:150px;
      }
    <div id='wrapper'>
      <div class='photo-box'></div>
      <div class='photo-box'></div>
      <div class='photo-box'></div>
      <div class='photo-box'></div>
      <div class='photo-box'></div>
      <div class='photo-box'></div>
      <div class='photo-box'></div>
    </div>

    However styling things like the scrollbar are not as simple and would require a fair amount more mark-up.

    Use a div with overflow:scroll as a starting place to get a scrolling box and you can find a jQuery plug-in for making custom scrollbars here.

    Login or Signup to reply.
  2. Just insert your own images and style the scrollbar.

    #scrollable {
      width: 500px;
      height: auto;
      margin: 100px auto;
      overflow: auto;
      white-space: nowrap;
    }
    <div id="scrollable">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search