Add Previous/Next Buttons to Horizontal Content Sc

Question

I have implemented jQuery Custom Scroller 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.

Below is my HTML and jQuery. Thanks Beforehand

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

<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

How about hooking up your "Next" and "Prev" buttons to the plugin's scrollTo method? From the documentation link you provided, it looks like you can scroll to an element given an ID (requires each element have an id rather than scrolling using element index) for some reason:

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

There isn't a lot of support for getting the current item in the scroller, so you'll probably have to manage that yourself (through an index that can be updated either through scrolling or clicking the next/prev buttons) and use the method above to scroll to the next div.

I've made a fiddle for this using a regular scroller (not with the plugin). Here's javascript source of it:

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