Remembered index behavior explanation
<p>Have you ever created script from scratch that does exactly what you want , but you have trouble understanding HOW and WHY it is working? Well I am having that problem:)</p>

<p>Example 1: On click of <b>p tag</b> <b>"yellow"</b> <i>(which has index 2)</i> show div with the <b>SAME INDEX</b> as clicked p tag (index 2) in my case <b>div</b> with class "yellow". <br/>Nothing out of the ordinary for now. 
<img src="http://www.robertpeic.com/contentslider/slides/slider.jpg"></p>

<p>Example 2: On <b>FIRST</b> "left" click my div's are cloned and inserted after "active" div.
<br/><b>BUT</b> if you check html code you will notice that my <b>div</b> with class "yellow"
has <b>changed</b> it's position <br/><b>it is last now and obviously HAS index(3)!!</b>
<br/><br/>So on <b>MY SECOND CLICK</b> I am clicking <b>p tag "yellow" <i>(which has index 2)</i></b> my div with class "yellow" still behaves like it still has <b>index(2)</b> although
it <b>obviously</b> has <b>index(3)</b>. <br/>That is exactly what I wanted!! 
<br/><br/> My question is: <i>WHY is my div with class "yellow" behaving like it still has index(2)?</i><br/>Thank you!!!
<img src="http://www.robertpeic.com/contentslider/slides/slider2.jpg">
<br/><br/><b><a href="http://jsfiddle.net/zXc3d/" rel="nofollow">Fiddle here</a></b></p>

<p>My full code:</p>

<pre><code>$(document).ready(function() {

$('.slides div:not(:first)').hide();
$('.slides div:first').addClass('active');
$('.control p:first').addClass('current');
$('.control p').click(function() {



/*store P index inside var*/    
var Pindex = $(this).index(); 
/* Store the slides in var*/

    var slidePosition=$('.wrapper .slides div');
/* check if ACTIVE slide has GREATER index than clicked P TAG (CONTROLS)*/

   if($(".wrapper .slides div.active").index() &gt; $('.wrapper .slides div').eq(Pindex).index()){

    /*Show the slide equal to clicked P-TAG(CONTROLS)*/
    slidePosition.eq(Pindex).show();

    /*Add class "current" to the clicked control*/
 $(this).addClass('current').prevAll('.current').removeClass('current');
 $(this).nextAll('.current').removeClass('current');    
 $(".active").removeClass("active");
 $(".slides").css({"margin-left":"-100px"});

     /*Start animation...*/
 $(".slides").animate({marginLeft:"+=100"},1000,function(){  
 slidePosition.eq(Pindex).addClass("active");
 $(".slides").css({"margin-left":"0px"});
 $(".active").prevAll().hide();
 $(".active").nextAll().hide();
 });
}

if($('.slides').is(':animated')){   
   return false;
}   

if($(this).is($(".current"))){   
   return false;
}


if($(".wrapper .slides div.active").index() &lt; $('.wrapper .slides div').eq(Pindex).index()){
 slidePosition.eq(Pindex).show();
 $(this).addClass('current').prevAll('.current').removeClass('current');
 $(this).nextAll('.current').removeClass('current');    
 $(".active").removeClass("active");

    $(".slides").animate({marginLeft:"-=100"},1000,function(){   
     slidePosition.eq(Pindex).addClass("active");
     $(".slides").css({"margin-left":"0px"});
     $(".active").prevAll().hide();
     $(".active").nextAll().hide();
    });
}




    });//end of p click function

$(".left").click(function(){

if($('.slides').is(':animated')){   
   return false;
}   

if($(".active").prev().length===0){

//alert("no prev");
 $(".active").nextAll().clone().insertBefore(".active");
 $(".active").removeClass("active").prev().addClass("active");
 $(".active").show();
 $(".slides").css({"margin-left":"-100px"});
    $(".slides").animate({marginLeft:"+=100"},1000,function(){  

     $(".active").next().insertBefore($(".slides div:first")).hide();
     $(".active").nextAll().remove();
     $(".current").removeClass("current");
     var activeIndex=$(".active").index();  
     //alert(activeIndex)
     $(".control p").eq(activeIndex).addClass("current");
    });  

}
else{

     $(".active").removeClass("active").prev().addClass("active");
     $(".active").show();
     $(".slides").css({"margin-left":"-100px"});
         $(".slides").animate({marginLeft:"+=100"},1000,function(){      
         $(".slides").css({"margin-left":"0px"});
         $(".active").prevAll().hide();
         $(".active").nextAll().hide();
         $(".current").removeClass("current");
         var activeIndex=$(".active").index();  
         $(".control p").eq(activeIndex).addClass("current");
        }); 
    }



});

$(".right").click(function(){

  if($('.slides').is(':animated')){   
   return false;
  }   
  if($(".active").next().length===0){
  //alert("no next")

   $(".slides div:first").nextAll(':not(.active)').clone().insertAfter(".active");
   $(".slides div:first").clone().insertAfter(".active");
   $(".active").removeClass("active").next().addClass("active");
   $(".active").show();
   $(".slides").animate({marginLeft:"-=100"},1000,function(){        
        $(".active").prev().hide().insertAfter(".slides div:last");
        $(".slides").css({"margin-left":"0px"});
        $(".active").prevAll().remove();
        $(".current").removeClass("current");
        var activeIndex=$(".active").index();   
        $(".control p").eq(activeIndex).addClass("current");
      }); 

  }
  else{
     $(".active").removeClass("active").next().addClass("active");
      $(".active").show();
      $(".slides").css({"margin-left":"0px"});


       $(".slides").animate({marginLeft:"-=100"},1000,function(){        
         $(".slides").css({"margin-left":"0px"});
         $(".active").prevAll().hide();
         $(".active").nextAll().hide();
         $(".current").removeClass("current");
         var activeIndex=$(".active").index();  
         $(".control p").eq(activeIndex).addClass("current");
        }); 

  }
});

    });
</code></pre>
