Пагинация для слайдера, каким может быть алгоритм?
 

Добрый вечер! Есть Jquery слайдер-ротатор. Просмотрел несколько слайдов, обычно к кнопкам привязывается .click() с анимацией. Подскажите как мне в данном случае "укратить код" и прикрутить кнопки пагинации?

<div class="rotate-wrap">
	<ul class="slides">
		<li id="rotate1"><img></li>
		<li id="rotate2"><img></li>
		<li id="rotate3"><img></li>
	</ul>
</div>

var Rotate=(function(){
	var
		classArray =[],
		rotateSlider;

	return {
		init:function(){
			this.addСlassSlide();
			this.clickReg();
			this.clickNavButtons();
		},

		// Функция 1
		addСlassSlide:function(){
			//Массив posArray содержит классы
			var posArray=[
				"rotate-item-outleft",
				"rotate-item-left",
				"rotate-item-active",
				"rotate-item-right",
				"rotate-item-outright"
			];
			//Для каждого #rotate удаляются классы,
			//добавляются из массива классы и добавляется класс rotate-cursor
			for (var i=1; i<=posArray.length; ++i) {
				$("#rotate"+i).removeClass().addClass(posArray[i-1]+' rotate-cursor');
			}
		},//addСlassSlide:function()

		// Функция 2: отвечает за выбор слайда по щелчку
		clickReg:function(){

			//Из каждого rotate-cursor берутся классы и записываются в массив classArray
			$(".rotate-cursor").each(function(){
				//в конец classArray записывается текущий класс
				classArray.push($(this).attr('class'));
			});

			//Общее число классов (например, 3) из classArray присваивается rotateSlider
			rotateSlider=classArray.length;

			//Из каждого класса заменяем rotate-cursor на пробел и записываем в classArray
			for(var i=0; i<rotateSlider; ++i){
				classArray[i]=classArray[i].replace(" rotate-cursor","")
			};

			//По клику на rotate-cursor, сделать следущее
			$(".rotate-cursor").click(function(build){
				var
					id=this.id,

					//.attr - возвращает класс из каждого #rotate от 1 до ...
					//.replace - заменяет rotate-cursor на пробел
					// в итоге в rotateСlassSlide записаны все классы
					rotateСlassSlide=$("#"+id).attr("class").replace(" rotate-cursor","");
					
				var
					//из classArray возвращаем index rotateСlassSlide (0,1,2)
					//и присваиваем к rotateItemClass
					rotateItemClass=classArray.indexOf(rotateСlassSlide),
					
					//из classArray возвращаем индекс класса rotate-item-active (2)
					//и присваиваем к rotateItemActive
					rotateItemActive=classArray.indexOf("rotate-item-active");

				//Если имя класса не совпадает с активным классом... или
				//Если строка с текущими классами не совпадает со строкой с  активным классом
				if(rotateItemClass != rotateItemActive){
					// условный оператор value = условие ?//
					//
					tomove = rotateItemClass > rotateItemActive ?
						//условиеTrue ://
						//Из общего числа классов (2) - 0,1,2
						//вычитаем индекс каждого класса (0,1,2)
						//прибивляем индекс активного класса (2)
						rotateSlider - rotateItemClass + rotateItemActive :
						//условиеFalse//
						// 1 (outleft),1(left),-2 (active)
						rotateItemActive - rotateItemClass;

					while(tomove){
						// получить первый класс (outleft)
						var t=classArray.shift();
						//Получаем следующие варианты:
						//rotate-item-left,rotate-item-active,rotate-item-outleft
						//rotate-item-active,rotate-item-outleft,rotate-item-left
						//rotate-item-outleft,rotate-item-left,rotate-item-active
						classArray.push(t);

						//rotateSlider=3, i=1,2,3
						for(var i=1; i<=rotateSlider; ++i){
							$("#rotate"+i).removeClass().addClass(classArray[i-1]+" rotate-cursor");
						}
						--tomove;
					}
				}
			});
		},//clickReg:function
	};
})();

$(document).ready(function(){
	$(".rotate-wrap").Rotate;
	Rotate.init();
	Rotate.auto();
});

Экспериментальная функция для анимации:

// Функция: отвечает за выбор слайда по кнопкам
		clickNavButtons:function(){

			$(".slides").parent().each(function () {
				var obj = $(this);
				$(obj)
					.append("<ol class='rotate-control-nav'></ol>")
					.find("li").each(function () {
						$(obj).find(".rotate-control-nav").append('<li><a></a></li>');
					
						$(".rotate-control-nav a")
							.attr('data-slide', function (index) {return index + 1;})
						
							.click(function () {
								$('.rotate-control-nav a').removeClass('active').addClass('off');
								$(this).addClass('active').removeClass('off');
								//
								var id = $(this).attr('data-slide');
								showSlide(id);
								//
							});
					});
				$(obj).find("a:first").addClass("active");
			});
			
			function stopLoop() {window.clearInterval(loop);}

			var
				sliderInt = 1,
				sliderNext = 2;

			function autoSlider() {
				count = $('.slides li').size();
				loop = setInterval(function () {
					if (sliderNext > count) {
						sliderNext = 1;
						sliderInt = 1;
					}
					alert('count');
//					$('.slides li').анимация;
//					$('.slides li#rotate' + sliderNext).анимация;
					sliderInt = sliderNext;
					sliderNext = sliderNext + 1;
				}, 3000); // after milliseconds loop
			}

			function showSlide(id) {
				stopLoop();
				if (id > count) {
					id = 1;
				} else if (id < 1) {
					id = count;
				}
//				$('.slides li').анимация;
//				$('.slides li#rotate' + id).анимация;
				$('.rotate-control-nav a' + id).addClass('active');

				sliderInt = id;
				sliderNext = id + 1;
				autoSlider();
			}

			$('.slides li').hover(
				function () {stopLoop();}, function () {autoSlider();}
			);

		}, //clickBullet:function

Думал можно примитивно сделать так:
1) Найти rotate-item-active
2) Узнать index #rotate
3) Присвоить класс .active такому же index data-slide.

Но .removeClass()!

Как пример можно эту использовать
http://jsfiddle.net/vlasenkofedor/hyQnb/

var Rotate=(function(){
	var
		rotateElem = $('.slides li'),
		classArray =[],
		rotateSlider;

	return {
		init:function(){
			this.addСlassSlide();
			this.clickReg();
		},

		//Функция 1
		addСlassSlide:function(){
			var
				posArray=[
					"rotate-item-outleft",
					"rotate-item-left",
					"rotate-item-active",
					"rotate-item-right",
					"rotate-item-outright"
				];
			
			rotateElem.each(function(index){
				for (var i=1; i<=posArray.length; ++i) {
					$(this).removeClass().addClass(posArray[index]);
				}
			});
		},

		//Функция 2
		clickReg:function(){
			rotateElem.each(function(){
				classArray.push($(this).attr('class'));
			});

			rotateSlider=classArray.length; //3

			$(".slides").parent().each(function () {
				var obj = $(this);
				$(obj).append("<ol class='rotate-control-nav'></ol>").find("li").each(function (index) {
						$(obj).find(".rotate-control-nav").append('<li><a></a></li>');
					});
			});

			var $rotateNav = $('.rotate-control-nav a');

			//Функция 2 =>> CLICK
			$('ol').on('click', 'a', function(){
				var navIndex=$rotateNav.index(this);
				
				$('.rotate-control-nav a').removeClass('active').addClass('off');
				$(this).addClass('active').removeClass('off');
				
				var rotateСlassSlide = rotateElem.eq(navIndex).attr("class");

				var
					rotateItemClass=classArray.indexOf(rotateСlassSlide),
					rotateItemActive=classArray.indexOf("rotate-item-active");

				if(rotateItemClass != rotateItemActive){
					tomove = rotateItemClass > rotateItemActive ?
						rotateSlider - rotateItemClass + rotateItemActive :
						rotateItemActive - rotateItemClass;
					
					while(tomove){
						var t=classArray.shift();
						classArray.push(t);
						
						rotateElem.each(function(index){
							for (var i=1; i<=rotateSlider; ++i) {
								$(this).removeClass().addClass(classArray[index]);
							}
						});
						--tomove;
					}
				}
			});//.click()
		},//clickReg:function

		// Функция автопрокрутки
		auto:function(){
			for(i=1; i<=1; ++i){
				$('.rotate-control-nav a').delay(100).trigger('click',"#rotate"+i).delay(100);
				console.log("called");
			}
		}
	};
})();

$(document).ready(function(){
	$(".rotate-wrap").Rotate;
	Rotate.init();
	Rotate.auto();
});

Работает, немного подмораживает, еще только учусь. Наверняка, есть лишний код, радуюсь, что работает :)