title: Add Previous/Next Buttons to Horizontal Content Scroller Targeting DIVS
body: <p>I have implemented <a href="http://manos.malihu.gr/jquery-custom-content-scroller/" rel="nofollow">jQuery Custom Scroller</a> for some scrolling on an div, this works great. I even used smooth scrolling to horizontally scroll to certain DIVs but my problem is that I want a Next and Previous Navigation button and I cannot find this anywhere.</p>
  
  <p>Below is my HTML and jQuery. Thanks Beforehand</p>
  
  <pre><code>&lt;div id="source-container"&gt;
          &lt;div class="container-inner"&gt;
                  &lt;div class="source-item item one current" id="the-cedarburg"&gt;
                      &lt;div class="source-slide-title"&gt;
                          &lt;h2&gt;the cedarburg&lt;/h2&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="source-item item two"  id="our-farm"&gt;
  
  
                    &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item three"  id="our-rooibos"&gt;
  
  
                  &lt;/div&gt;
                  &lt;div class="source-item item four"  id="our-process"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item five"  id="our-innovation"&gt;
  
                    &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item six"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item seven"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item eight"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item nine"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item ten"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item eleven"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item twelve"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item thirteen"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item fourteen"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item fifteen"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item sixteen"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item seventeen"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item eighteen"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item nineteen" &gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item twenty"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item twentyone"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="source-item item twentytwo"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#source-container{
      overflow-x: hidden;
      overflow-y: hidden;
  }
  
  .source-item{
  float: left;
  display: inline-block;
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center;
   -moz-background-size: cover;
  }
  
  #source-container .one{background-image:url(images/source/1-the-cedarberg.jpg);}
  
  #source-container .two{background-image:url(images/source/2-the-cedarberg.jpg);}
  
  #source-container .three{background-image:url(images/source/3-the-cedarberg.jpg);}
  
  #source-container .four{background-image:url(images/source/4-the-cedarberg.jpg);}
  
  #source-container .five{background-image:url(images/source/5-the-cedarberg.jpg);}
  
  #source-container .six{background-image:url(images/source/6-the-cedarberg.jpg);}
  
  #source-container .seven{background-image:url(images/source/2-our-farm.jpg);}
  
  #source-container .eight{background-image:url(images/source/1-our-farm.jpg);}
  
  #source-container .nine{background-image:url(images/source/3-our-farm.jpg);}
  
  #source-container .ten{background-image:url(images/source/4-our-farm.jpg);}
  
  #source-container .eleven{background-image:url(images/source/1-our-rooibos.jpg);}
  
  #source-container .twelve{background-image:url(images/source/6-the-cedarberg.jpg);}
  
  #source-container .thirteen{background-image:url(images/source/1-the-cedarberg.jpg);}
  
  #source-container .fourteen{background-image:url(images/source/2-the-cedarberg.jpg);}
  
  #source-container .fifteen{background-image:url(images/source/3-the-cedarberg.jpg);}
  
  #source-container .sixteen{background-image:url(images/source/4-the-cedarberg.jpg);}
  
  #source-container .seventeen{background-image:url(images/source/5-the-cedarberg.jpg);}
  
  #source-container .eighteen{background-image:url(images/source/6-the-cedarberg.jpg);}
  
  #source-container .nineteen{background-image:url(images/source/1-the-cedarberg.jpg);}
  
  #source-container .twenty{background-image:url(images/source/2-the-cedarberg.jpg);}
  
  #source-container .twentyone{background-image:url(images/source/3-the-cedarberg.jpg);}
  
  #source-container .twentytwo{background-image:url(images/source/4-the-cedarberg.jpg);}
  
  
  
  
  .mCSB_dragger_bar{box-sizing:border-box;}
  
  .source-item{border-right:5px solid #e1001a; border-left:5px solid #3c1c11;}
  </code></pre>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>&lt;script&gt;
  $(function(){
   $('.container-inner').css({'width':(jQuery(window).width())*22+'px'});
      $(window).resize(function(){
          $('.container-inner').css({'width':(jQuery(window).width())*22+'px'});
      });
  });
  
  $(document).ready(function(e) {
  $("#source-container").mCustomScrollbar({
                      horizontalScroll:true,
                      mouseWheelPixels: 500,
                      autoDraggerLength: false,
                      callbacks:{
                          onScroll:function(){ 
                              $("."+this.attr("id")+"-pos").text(mcs.left);
                          }
                      }
                  });
  });
  
  $(function(){
   $('#source-container').css({'height':(jQuery(window).height())/100*80+'px'});
      $(window).resize(function(){
          $('#source-container').css({'height':(jQuery(window).height())/100*80+'px'});
      });
  });
  
  $(function(){
   $('.source-item').css({'width':(jQuery(window).width())+'px'});
      $(window).resize(function(){
          $('.source-item').css({'width':(jQuery(window).width())+'px'});
      });
  });
  
  $(function(){
  $('.source-item').css({'height':($('#source-container').height())+'px'});
      $('#source-container').resize(function(){
          $('#source-item').css({'height':($('#source-container').height())+'px'});
      });
  });
  $(".output a[rel~='_mCS_2_scrollTo']").click(function(e){
                      e.preventDefault();
  
                      $("#source-container").mCustomScrollbar("scrollTo",$(this).attr("href"));
  });
  $('ul li a').on('click', function() {  
      $('ul li a.active').removeClass('active');
      $(this).addClass('active');    
  });
  
  $('.source-slide-dropdown').on('click', function() {  
      $('.source-slide-dropdown').css('border-bottom-right-radius','0px');  
  
  });
  &lt;/script&gt;
  </code></pre>