title: On Click Div Scroll Right
body: <p>I'm in the process of creating a wedding website for my best friend. It includes a horizontal scrolling div with images inside of each individual in the bridal party. (There are 16 total.) When an image is clicked on, a short bio pops up of the individual. It looks great,</p>
  
  <p><strong>BUT I was curious if there was a way for the div to scroll, on the click of an arrow, to the next set of images hidden in the scroll.</strong></p>
  
  <p>I've looked up a lot of onClick scripts. I just can't seem to make any of them work the way I would like it to. Your help is much appreciated. Other ideas are welcome as well to get a similar effect.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="the_bridal_party"&gt;
      &lt;h1&gt;The Bridal Party&lt;/h1&gt;
  
          &lt;div id="scroll_wrapper"&gt;
          &lt;div id="scroll_arrowleft"&gt;&lt;/div&gt;
          &lt;div id="scroll"&gt;
                  &lt;ul&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;li&gt;Linked Image&lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id="scroll_arrowright"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;small&gt;(To find out more about anyone in the bridal party, click on their image.)&lt;/small&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>#the_bridal_party {
      width: 1000px;
      height: 380px;
      margin-top: 75px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }
  
  #scroll_wrapper {
      width: 1000px;
      height: 300px;
      margin-top:25px;
      text-align: center;
  }
  
  #scroll {
      width: 920px;
      height: 300px;
      overflow: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      margin-left: 10px;
      margin-right: 10px;
      float: left;
  }
  
  #scroll ul {
      margin: 0;
      padding: 0;
      list-style-type: none;  
  }
  
  #scroll ul li {
      display: inline;
  }
  
  #scroll_arrowleft {
      background-image: url(images/arrowleft.png);
      background-position-x: 50%;
      background-position-y: 50%;
      background-position: center;
      background-size: initial;
      background-repeat: no-repeat;
      width: 29px;
      height: 300px;
      cursor: pointer;
      float: left;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }
  
  #scroll_arrowright {
      background-image: url(images/arrowright.png);
      background-position-x: 50%;
      background-position-y: 50%;
      background-position: center;
      background-size: initial;
      background-repeat: no-repeat;
      width: 29px;
      height: 300px;
      cursor: pointer;
      float: right;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }
  </code></pre>