title: Custom Horizontal Scrollbar
body: <p>I am trying to create a content slider which will be governed by a scroll bar. I want the scroll bar to look like this <img src="https://i.stack.imgur.com/Ril0l.png" alt="Requirement"></p>
  
  <p>First of let me give u my HTML and Css Layout</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div class="service-main-content"&gt;
          &lt;div id="service-display"&gt;
              &lt;!-- Start Page --&gt;
              &lt;div id="service-showcase" class="service-content"&gt;
                  DISPLAY ALL SERVICES
              &lt;/div&gt;
  
              &lt;!-- Web Services --&gt;
              &lt;div id="service-web" class="service-content"&gt;
                  Content 1
              &lt;/div&gt;
  
              &lt;!-- Software Development --&gt;
              &lt;div id="service-app" class="service-content"&gt;
                  Content 2
              &lt;/div&gt;
  
              &lt;!-- Network Solutions --&gt;
              &lt;div id="service-network" class="service-content"&gt;
                  Content 3
              &lt;/div&gt;
  
              &lt;!-- Call Center --&gt;
              &lt;div id="service-call" class="service-content"&gt;
                  Content 4
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.service-main-content{
      padding-top:8%;
      width:100%;
      height:100%;
      position:relative;
  
  
  }
  
  .service-content{
      position: absolute;
      z-index:3900;
      padding-left: 6%;
      padding-right: 6%;
  
  }
  #service-display{
      position: absolute;
      width:80%;
      height:100%;
      float: left;
      overflow-y: hidden;
      overflow-x: scroll;
      margin-left:10%;
      margin-right:10%;
      scrollbar-face-color: #b46868;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var win_width = $(window).width();
  var win_height = $(window).height();
  $.fn.set_left = function() {
      var s_divs = ["#service-showcase", "#service-web", "#service-app", "#service-network", "#service-call"];
      left = 0;
      jQuery.each(s_divs, function(i, val) {
  
          $(val).css("left", left + "px");
          left = left + win_width;
      });
  
  };
  
  $(document).ready(function() {
  
      win_height = win_height / 100 * 65;
      $(".service-content").css("min-width", win_width + "px");
      $("#service-display").css("min-height", win_height + "px");
      $(this).set_left();
  
      $('#service-display').jScrollPane({
          showArrows : true,
          horizontalDragMinWidth : 5,
          horizontalDragMaxWidth : 50
      });
      //
      // $("#service-display").mCustomScrollbar({
      // horizontalScroll : true,
      // //scrollEasing : "easeOutQuart",
      // //autoDraggerLength : false
      // });
  
      //$("#service-display").slider();
  
  });
  </code></pre>
  
  <p>I tried a few Plugins Namely:</p>
  
  <ul>
  <li>JScrollPane</li>
  <li>mCustomScrollbar</li>
  </ul>
  
  <p>As shown above in the JS code.
   This is the output I am getting for JScrollPane</p>
  
  <p><strong>JScrollPane</strong>
  <img src="https://i.stack.imgur.com/4mir2.png" alt="JSCROLLPANE OUTPUT"></p>
  
  <p>I case of mCustomScroll , all my content is hidden and I see the default scrollbar.</p>
  
  <p>Please guide me through this. I would be really very grateful.</p>
  
  <p>Thanking You</p>