title: How the get scroll the div horizontal using left and right buttons
body: <p>I have a class called <strong>portfolio-items</strong> where it will scroll horizontal. I need <code>jQuery</code> which helps me to scroll to the next and previous closest classes using my next and previous buttons. Need it more specific like on click my buttons it need the get the position of my closest div and scroll accordingly left or right.</p>
  
  <p>Below Is my code </p>
  
  <p><strong>MARKUP</strong></p>
  
  <pre><code>&lt;span class='arrow-left'&gt;left&lt;/span&gt;
  &lt;span class='arrow-right'&gt;right&lt;/span&gt;
  &lt;div class='row offer-pg-cont'&gt;
      &lt;div class='offer-pg'&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;img src="images/a1.png" class="items" height="100" alt="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.offer-pg-cont{
      width: 100%;
      overflow-x: auto;
      margin: 0px;
  }
  span.arrow-left,span.arrow-right{
      display: block;
      position: absolute;
      background-color: #555;
      top: 40px;
      color:white;
      z-index: 2;
      cursor: pointer;
  }
  span.arrow-left{
      left: 0px;
  }
  span.arrow-right{
      right: 0px;
  }
  span.arrow-left:hover,.offer-pg span.arrow-right:hover{
      background-color: #333;
  }
  .offer-pg{
      width: 1500px;
  }
  .item-wrapper.offer-con{
      background-color: #333 !important;
  }
  .offer-con .left-item h4 {
      color: #fff;
      font-weight: normal;
      margin: 0px;
  }
  .offer-con .right-item{
      float: right;
      padding: 10px;
  }
  .offer-con .right-item h5{
      color: #cb9944;
      margin: 0px;
      font-size: 14px;
  }
  .offer-pg &gt; .portfolio-item{
      width: 100px;
      background-color:blue;
      margin-left:10px;
      float:left;
  }
  </code></pre>
  
  <p>Please check my fiddle <a href="http://jsfiddle.net/xQh5J/176/" rel="nofollow">DEMO</a></p>
  
  <p>Thanks.</p>