mcustom Scrollbar autoscroll Issue

Question

I am trying to create a div with content scrolling horizontally after a specific period of time - Like a slide show. I am using mcustomscollbar plugin. I am using a for loop to increment the id's and using the scrollTo function to slide the content but the scroll jumps to the last one.

Here its the js

for (var num = 1; num < 24; num++) {
    var idj = '#' + 'id' + num;
    var dlp = scrollToI(idj);
}

    function scrollToI(person) {
    setTimeout(function () {
        console.log(person);
        $('#content1').mCustomScrollbar("scrollTo", person);
    }, 2000);
}

Fiddle : http://jsfiddle.net/infern00/3psLU/

ScrollBar Plugin used : http://manos.malihu.gr/jquery-custom-content-scroller/

Answer 1

You mean something like this:

 $(document).ready(function () {
    $("#content1").mCustomScrollbar({
       axis: "x",
       theme: "dark-thick",
       advanced: {
          autoExpandHorizontalScroll: true
       }
    });
    var i = 1;

    var interval = setInterval(function () {
       var idj = '#' + 'id' + i;
       console.log(idj);
       scrollToI(idj);
       if (i > 23) clearInterval(interval);

       i++;
    }, 2000);


    function scrollToI(person) {
        $('#content1').mCustomScrollbar("scrollTo", person);
    }
});

Check the FIDDLE