自定义水平滚动条

Question

我正在尝试创建一个内容滑块，该滑块将由滚动条控制。我希望滚动条看起来像这个

首先让我给你我的HTML和Css布局

HTML

 <div class="service-main-content">
        <div id="service-display">
            <!-- Start Page -->
            <div id="service-showcase" class="service-content">
                DISPLAY ALL SERVICES
            </div>

            <!-- Web Services -->
            <div id="service-web" class="service-content">
                Content 1
            </div>

            <!-- Software Development -->
            <div id="service-app" class="service-content">
                Content 2
            </div>

            <!-- Network Solutions -->
            <div id="service-network" class="service-content">
                Content 3
            </div>

            <!-- Call Center -->
            <div id="service-call" class="service-content">
                Content 4

            </div>
        </div>

    </div>

CSS

.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;
}

JS

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();

});

我尝试了几个插件：

• JS​​crollPane的
• mCustomScrollbar

如上面的JS代码所示。  这是我为JScrollPane

获得的输出

JScrollPane的

我是mCustomScroll的情况，我的所有内容都被隐藏了，我看到了默认的滚动条。

请指导我完成这个。我真的很感激。

感谢你