OK, done some work, got rid of a lot of unnecessary code and changed the image when the controller is clicked on - the only thing is that I got rid of the animation in the manual carousel, here is the function that does it all:
(document).ready(function(){
//console.log("ohi");
init();//initialize carousel
resizeCarousel();
var timer = setInterval('startCarousel()', 3000);
$(".controllers a.indicator").click(function(){//when a controller is clicked
$(".imageWrapper div").css("z-index",1);//index of all div to 1
clearInterval(timer);//stop the carousel
$(".controllers a.indicator.active").removeClass("active");//remove active from all of controllers
/* $(".imageWrapper div.active").fadeOut(1550,function(){//fade out first image
$(this).show().removeClass("active");//reset z-index, reverse the fadeOut with next
$nextSlide.css("z-index",3).addClass("active");//move image to the top
updateController();//update the controller
}); */
$(".imageWrapper div.active").removeClass("active").css("z-index",2);//remove active from the div
$(this).addClass("active");
$("a.indicator").each(function(index){//go thru each controller
var $this = $(this);
if($this.hasClass("active")){//if it has active class
//updateCarousel(index);
$(".imageWrapper > div").eq(index).addClass("active").css("z-index",3);//get the equivalent controller and give it an active class
}
});
});
As you can see the fadeing out is commented out, because I just can't get it to work. This is what the new code does:
click on controller
stop the carousel etc
drop index of all divs (slides) to 1
remove active class from currently active controller
remove active class from currently active slide and drop its index to 2
add active class to clicked controller
run thru all controllers
find the active one and assign active class to the corresponding slide and increase its z-index to 3
I'm not sure how the fadingOut will fit in here