Jquery 将上一个/下一个按钮添加到目标div的水平内容滚动条

我已经在一个div上实现了一些滚动，这非常有效。我甚至使用平滑滚动来水平滚动到某些div，但我的问题是我想要一个下一个和上一个导航按钮，而我在任何地方都找不到

下面是我的HTML和jQuery。事先谢谢

<div id="source-container">
        <div class="container-inner">
                <div class="source-item item one current" id="the-cedarburg">
                    <div class="source-slide-title">
                        <h2>the cedarburg</h2>
                    </div>
                </div>
                <div class="source-item item two"  id="our-farm">


                  </div>

                </div>
                <div class="source-item item three"  id="our-rooibos">


                </div>
                <div class="source-item item four"  id="our-process">

                </div>
                <div class="source-item item five"  id="our-innovation">

                  </div>

                </div>
                <div class="source-item item six">

                </div>
                <div class="source-item item seven">

                </div>
                <div class="source-item item eight">

                </div>
                <div class="source-item item nine">

                </div>
                <div class="source-item item ten">

                </div>
                <div class="source-item item eleven">

                </div>
                <div class="source-item item twelve">

                </div>
                <div class="source-item item thirteen">

                </div>
                <div class="source-item item fourteen">

                </div>
                <div class="source-item item fifteen">

                </div>
                <div class="source-item item sixteen">

                </div>
                <div class="source-item item seventeen">

                </div>
                <div class="source-item item eighteen">

                </div>
                <div class="source-item item nineteen" >

                </div>
                <div class="source-item item twenty">

                </div>
                <div class="source-item item twentyone">

                </div>
                <div class="source-item item twentytwo">

                </div>
            </div>
    </div>
 </div>

脚本：

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

<script>
$(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');  

});
</script>

$（函数（）{
$（'.container-inner'）.css（{'width'：（jQuery（window.width（））*22+'px'}）；
$（窗口）。调整大小（函数（）{
$（'.container-inner'）.css（{'width'：（jQuery（window.width（））*22+'px'}）；
});
});
$（文档）.ready（函数（e）{
$（“#源容器”）.mCustomScrollbar({
水平卷轴：对，
鼠标指针像素：500，
AutoDragger长度：false，
回调：{
onScroll:function（）{
$（“+”this.attr（“id”）+“-pos”）.text（mcs.left）；
}
}
});
});
$（函数（）{
$（'#源容器'）.css（{'height'：（jQuery（window.height（））/100*80+'px'）；
$（窗口）。调整大小（函数（）{
$（'#源容器'）.css（{'height'：（jQuery（window.height（））/100*80+'px'）；
});
});
$（函数（）{
$（'.source item'）.css（{'width'：（jQuery（window.width（））+'px'}）；
$（窗口）。调整大小（函数（）{
$（'.source item'）.css（{'width'：（jQuery（window.width（））+'px'}）；
});
});
$（函数（）{
$（'.source item'）.css（{'height'：（$（'#source container'）.height（））+'px'}）；
$（'#源容器'）。调整大小（函数（）{
$（'#source item'）.css（{'height'：（$（'#source container'）.height（））+'px'}）；
});
});
$（“。输出一个[rel~=''u mCS\u 2\u scroll to']”。单击（函数（e）{
e、 预防默认值（）；
$（“#源容器”）.mCustomScrollbar（“滚动条”），$（this.attr（“href”）；
});
$（'ul li a'）。在（'click'，function（）{
$（'ul li a.active'）。removeClass（'active'）；
$（this.addClass（'active'）；
});
$（'source slide dropdown'）。在（'click'，function（）{
$（'source slide dropdown'）.css（'border-bottom-right-radius'，'0px'）；
});

如何将“下一步”和“上一步”按钮连接到插件的scrollTo方法？ 从您提供的文档链接中，您似乎可以滚动到给定ID的元素（要求每个元素都有ID，而不是使用元素索引滚动），原因如下：

var elID="#el-1";
$(".content").mCustomScrollbar("scrollTo",elID);

在滚动条中获取当前项目没有太多的支持，因此您可能需要自己管理它（通过一个可以通过滚动或单击next/prev按钮进行更新的索引），并使用上面的方法滚动到下一个div

我已经用一个普通的滚动条（而不是插件）对此做了一个测试。下面是它的javascript源代码：

var currentElement = $("#wrapper > div:nth-child(2)");
var onScroll = function () {
    //get the current element
    var container = $("#source-container");
    var wrapper = $("#wrapper");
    var children = wrapper.children();
    var position = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            console.log(currentElement)
            return;
        }
    }
}

var indexClick = function () {
    console.log($("#inputScrollIndex").val())
    var index = parseInt($("#inputScrollIndex").val(), 10) - 1;
    if (index < 1) {
        index = 0;
    }
    console.log(index);
    scrollToIndex(index);
}

var scrollToIndex = function (index) {
    var element = $($("#wrapper").children()[index]);
    scrollToElement(element);
}

var scrollToElement = function ($element) {
    var container = $("#source-container");
    var wrapper = $("#wrapper");
    var children = wrapper.children();
    var width = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        if (child.get(0) == $element.get(0)) {
            if (i == 0) {
                width = 0;
            }
            container.animate({
                scrollLeft: width
            }, 100);
            onScroll();
        }
        if (child.next().length > 0) {
            //make sure we factor in borders/padding/margin in height
            width += child.next().offset().left - child.offset().left
        } else {
            width += child.width();
        }
    }
}

var next = function (e) {
    scrollToElement(currentElement);
}

var prev = function (e) {
    var container = $("#source-container");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
}

$("#source-container").scroll(onScroll);
$("#scrollIndex").click(indexClick);
$("#next").click(next);
$("#prev").click(prev);

var currentElement=$（“#wrapper>div:nth child（2）”；
var onScroll=函数（）{
//获取当前元素
var容器=$（“#源容器”）；
var wrapper=$（“#wrapper”）；
var children=wrapper.children（）；
var位置=0；
对于（变量i=0；i0）{
//确保我们在高度上考虑了边框/填充/边距
宽度+=child.next（）.offset（）.left-child.offset（）.left
}否则{
宽度+=子.width（）；
}
}
}
var next=函数（e）{
scrollToElement（当前元素）；
}
var prev=功能（e）{
var容器=$（“#源容器”）；
如果（currentElement.prev（）.length>0）{
if（container.offset（）.left==currentElement.prev（）.offset（）.left）{
currentElement=currentElement.prev（）.prev（）.length>0？currentElement.prev（）.prev（）：currentElement.prev（）；
}否则{
currentElement=currentElement.prev（）；
}
}
scrollToElement（当前元素）；
}
$（“#源容器”）。滚动（onScroll）；
$（“#滚动索引”）。单击（索引单击）；
$（“#下一步”）。单击（下一步）；
$（“上一页”）。单击（上一页）；

如何将“下一步”和“上一步”按钮连接到插件的scrollTo方法？ 从您提供的文档链接中，您似乎可以滚动到给定ID的元素（要求每个元素都有ID，而不是使用元素索引滚动），原因如下：

var elID="#el-1";
$(".content").mCustomScrollbar("scrollTo",elID);

在滚动条中获取当前项目没有太多的支持，因此您可能需要自己管理它（通过一个可以通过滚动或单击next/prev按钮进行更新的索引），并使用上面的方法滚动到下一个div

我已经用一个普通的滚动条（而不是插件）对此做了一个测试。下面是它的javascript源代码：

var currentElement = $("#wrapper > div:nth-child(2)");
var onScroll = function () {
    //get the current element
    var container = $("#source-container");
    var wrapper = $("#wrapper");
    var children = wrapper.children();
    var position = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            console.log(currentElement)
            return;
        }
    }
}

var indexClick = function () {
    console.log($("#inputScrollIndex").val())
    var index = parseInt($("#inputScrollIndex").val(), 10) - 1;
    if (index < 1) {
        index = 0;
    }
    console.log(index);
    scrollToIndex(index);
}

var scrollToIndex = function (index) {
    var element = $($("#wrapper").children()[index]);
    scrollToElement(element);
}

var scrollToElement = function ($element) {
    var container = $("#source-container");
    var wrapper = $("#wrapper");
    var children = wrapper.children();
    var width = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        if (child.get(0) == $element.get(0)) {
            if (i == 0) {
                width = 0;
            }
            container.animate({
                scrollLeft: width
            }, 100);
            onScroll();
        }
        if (child.next().length > 0) {
            //make sure we factor in borders/padding/margin in height
            width += child.next().offset().left - child.offset().left
        } else {
            width += child.width();
        }
    }
}

var next = function (e) {
    scrollToElement(currentElement);
}

var prev = function (e) {
    var container = $("#source-container");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
}

$("#source-container").scroll(onScroll);
$("#scrollIndex").click(indexClick);
$("#next").click(next);
$("#prev").click(prev);

var currentElement=$（“#wrapper>div:nth child（2）”；
var onScroll=函数（）{
//获取当前元素
var容器=$（“#源容器”）；
var wrapper=$（“#wrappe