How to make in a for statement, "i" to start from a value until the cycle is end, and the second cycle to start from 1

Question

I have something a little bit more complicated. I have five li's and a class "active".

Only one of li's has class "active". That one will have the color red.

When i click the "Next" link the class "active" will be added to the next li.

When i click the "Prev" link the class "active" will be added to the previous li.

When i click on a li, the class "active" will be added only to the clicked li.

Those thinks work, but there is a problem with the loop() function.

I need the class "active" to move automatically from one li to the next. It works, but things are going crazy when i click next-link, prev-link or a li.

All those 3 elements: loop, next-prev links and click on a li should work perfect together.

If i click the next-link, and the class "active" is transfered from the second li to the third li,i need the "for" statement to continue from the third li to move the class and continue the cycle.

I could try to take that "i" in the for from nr-1 (the li what was clicked) not from 0, for(var i=nr-1; i < functions.length; i++), but after the first cycle of class "active" it should start from 0 again, but it starts from the nr-1,which is normal.

The loop works, the problem appears when i click a li or the prev-next link.

$(document).ready(function () {

  var f1 = function () {
    $(".1").addClass("active").siblings("li").removeClass("active")
  };
  f2 = function () {
    $(".2").addClass("active").siblings("li").removeClass("active")
  };
  f3 = function () {
    $(".3").addClass("active").siblings("li").removeClass("active")
  };
  f4 = function () {
    $(".4").addClass("active").siblings("li").removeClass("active")
  };
  f5 = function () {
    $(".5").addClass("active").siblings("li").removeClass("active")
  };

  var functions = [f1, f2, f3, f4, f5];
  var y = functions.length;

  var loop = function () {
    for (var i = 0; i < functions.length; i++) {
      (function (i) {
        setTimeout(function () {
          functions[i]();
        }, 1000 * i);
      })(i);
    }
    setTimeout(loop, (1000 * (functions.length)));
  }
  
  loop();

  $("ol li ").click(function () {
    var nr = $(this).data("number");
    functions[nr - 1]();
  });


  $(".flex-next").click(function () {
    var nr = $("ol").find("li.active").data("number");

    if (nr == y) {
      functions[0]();
    } else {
      functions[nr]();
    }

  });


  $(".flex-prev").click(function () {
    var nr = $("ol").find("li.active").data("number");
    //y = functions.length;
    if (nr == 1) {
      functions[y - 1]();
    } else {
      functions[nr - 2]();
    }

  });

});

@import url(http://reset5.googlecode.com/hg/reset.min.css);
ol li {
  width:50px;
  height:50px;
  background-color:blue;
  float:left;
  margin:10px;
}
ul li a {
  text-decoration: none;
  width:100px;
}
.active {
  background-color:red;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
  <li data-number="1" class="1 active ">
    <a href="#"></a>	
  </li>
  <li data-number="2" class="2">
    <a href="#"></a> 
  </li>
  <li data-number="3" class="3">
    <a href="#"></a> 
  </li>
  <li data-number="4" class="4">
    <a href="#"></a> 
  </li>
  <li data-number="5" class="5">
    <a href="#"></a> 
  </li>
</ol>
<ul class="flex-direction-nav">
  <li>
    <a class="flex-prev" href="javascript:void(0);">Previous</a>
  </li>
  <li>
    <a class="flex-next" href="javascript:void(0);">Next</a>
  </li>
</ul>

jsfiddle here

Answer 1

Modified your loop() a bit.

$(document).ready(function () {

  var f1 = function () {
    $(".1").addClass("active").siblings("li").removeClass("active")
  };
  f2 = function () {
    $(".2").addClass("active").siblings("li").removeClass("active")
  };
  f3 = function () {
    $(".3").addClass("active").siblings("li").removeClass("active")
  };
  f4 = function () {
    $(".4").addClass("active").siblings("li").removeClass("active")
  };
  f5 = function () {
    $(".5").addClass("active").siblings("li").removeClass("active")
  };

  var functions = [f1, f2, f3, f4, f5];
  var y = functions.length;
  var myInterval = null;
  var loop = function (goToFirst) {
    if(goToFirst == true)
      f1();
    myInterval = setInterval(function(){
      $(".flex-next").click();
    },1000);
  }
  
  loop(true);

  $("ol li ").click(function () {
    var nr = $(this).data("number");
    functions[nr - 1]();
  });


  $(".flex-next").click(function () {
    var nr = $("ol").find("li.active").data("number");
    clearInterval(myInterval);
    if (nr == y) {
      functions[0]();
    } else {
      functions[nr]();
    }
    loop(false);
  });


  $(".flex-prev").click(function () {
    var nr = $("ol").find("li.active").data("number");
    clearInterval(myInterval);
    if (nr == 1) {
      functions[y - 1]();
    } else {
      functions[nr - 2]();
    }
    loop(false);
  });

});

@import url(http://reset5.googlecode.com/hg/reset.min.css);
ol li {
  width:50px;
  height:50px;
  background-color:blue;
  float:left;
  margin:10px;
}
ul li a {
  text-decoration: none;
  width:100px;
}
.active {
  background-color:red;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
  <li data-number="1" class="1 active ">
    <a href="#"></a>	
  </li>
  <li data-number="2" class="2">
    <a href="#"></a> 
  </li>
  <li data-number="3" class="3">
    <a href="#"></a> 
  </li>
  <li data-number="4" class="4">
    <a href="#"></a> 
  </li>
  <li data-number="5" class="5">
    <a href="#"></a> 
  </li>
</ol>
<ul class="flex-direction-nav">
  <li>
    <a class="flex-prev" href="javascript:void(0);">Previous</a>
  </li>
  <li>
    <a class="flex-next" href="javascript:void(0);">Next</a>
  </li>
</ul>