Кто может помочь понять принцип работы карусели на jQuery?

Пишу свою простую карусель, но анимационные эффекты не совсем правильно работают, подскажите принцип работы карусели на jQuery?

Вот код который пока что описывает прокрутку только вперед:

function easeCarousel(container) {
	var slideRow = container.find('.slide-row'),
		slides = container.find('.slide'),
		controls = container.find('.control'),
		activeSlide,
		newSlide,
		totalSlides = slides.length,
		// slideRowWidth = slides.width()*totalSlides;
		containerWidth = slides.width();

		// slideRow.width(slideRowWidth);
		container.width(containerWidth);

		activeSlide = 0;

	controls.on('click', function(event) {
		event.preventDefault();

		changeSlides(getPrefixControl($(this)));
	});

	function changeSlides(target) {
		if(target == 'next') {
			newSlide = activeSlide +1;

			if(newSlide > totalSlides -1) {
				newSlide = 0;
			}
		}

		animateSlides(activeSlide, newSlide);
	}


	function animateSlides(activeNdx, newNdx) {
		slides.eq(newNdx).css('left', '100%');

		slides.eq(activeNdx)
		.animate(
			{
				'left': '-100%'
			}, 
			{
				duration: 400,
				progress: function() {
					slides.eq(newNdx)
					.css('left', 0)
				},
				complete: function() {
					slides.eq(newNdx).addClass('active');
					slides.eq(activeNdx)
					.removeClass('active')
					.removeAttr('style');
					activeSlide = newNdx;
				}
			}
		);
	}


	function getPrefixControl(control) {
		var prefix = control.attr('class');
		prefix = prefix.substring(8);

		return prefix;
	}
};