添加上一個/下一個按鈕到水平內容滾動目標DIVS

Question

我已經實現了jQuery Custom Scroller在div上滾動一些，這很好。我甚至使用平滑滾動來水平滾動到某些DIV，但我的問題是，我想要一個Next和Previous Navigation按鈕，我無法在任何地方找到它。

下面是我的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> 

CSS：

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

Answer 1

如何鉤住你的 「下一步」 和 「後退」 按鈕插件的scrollTo方法？ 從您提供的文件的鏈接，它看起來像你可以滾動到給定的ID的元素（要求每個元素都有一個ID，而不是使用元素的索引滾動）出於某些原因：

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

沒有一個很多支持獲取滾動條中的當前項目，因此您可能必須自己管理它（通過可通過滾動或單擊下一個/前導按鈕進行更新的索引）並使用上述方法滾動到下一個div。

我爲此使用常規滾動條（不帶插件）製作了fiddle。這裏的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);