generic slideshow

gistfile1.js

function Slideshow(){
	$('.module-slideshow').each(function(index, item){
		var width = 0, height;

		$(item).find('.module-slideshow__item').each(function(index1, item1){
			width += + $(item1).width()+3;

			$(item1).width($(item1).width());
			$(item1).height($(item1).height());
		});

		$('.module-slideshow__container').width(width);
	});

	$('.module-slideshow__control').on('click', function(){
		var slideshowLength = $(this).parent().find('.module-slideshow__item').length;
		var selected = $(this).parent().find('.module-slideshow__item[data-selected="true"]');
		var index = selected.attr('data-index');
		var container = $(this).parent().find('.module-slideshow__container');
		var direction = $(this).attr('data-direction');

		// When you're on the last slide and you click next
		if(index == slideshowLength && direction == 'right'){

			var first = $(this).parent().find('.module-slideshow__item[data-index="1"]');
			var firstClone = $(this).parent().find('.module-slideshow__item[data-index="1"]').clone();
			firstClone.attr('data-index', slideshowLength+1);
			var oldWidth = container.width();
			container.width(container.width()+firstClone.width()+3);
			container.append(firstClone);

			selected.attr('data-selected', false);

			var next = selected.next();

			next.attr('data-selected', true);

			var nextWidth = next.width();
			var position = container.position();
			var newPosition = position.left - nextWidth;

			container.animate(
				{'left': newPosition},
				500,
				function(){
					container.css('left', 0);
					selected.attr('data-selected', false);
					first.attr('data-selected', true);
					container.width(oldWidth);
					firstClone.remove();
				}
			);


		}
		// When you're on the first slide and you click previous
		else if(index == 1 && direction == 'left'){

			var last = $(this).parent().find('.module-slideshow__item[data-index="'+slideshowLength+'"]');
			var lastClone = $(this).parent().find('.module-slideshow__item[data-index="'+slideshowLength+'"]').clone();
			lastClone.attr('data-index', 0);
			var oldWidth = container.width();
			container.width(container.width()+lastClone.width()+3);

			container.css('left', -last.width());
			container.prepend(lastClone);

			selected.attr('data-selected', false);

			var next = selected.prev();

			next.attr('data-selected', true);

			var newPosition = 0;

			container.animate(
				{'left': newPosition},
				500,
				function(){
					container.css('left', -(last.position().left - last.width()));
					//container.css('left', 0);
					selected.attr('data-selected', false);
					last.attr('data-selected', true);
					container.width(oldWidth);
					lastClone.remove();
				}
			);

		}
		// Normal next
		else if(direction == 'right'){

			selected.attr('data-selected', false);

			var next = selected.next();

			next.attr('data-selected', true);

			var nextWidth = next.width();
			var position = container.position();
			var newPosition = position.left - nextWidth;

			container.animate({'left': newPosition});

		}
		// Normal Previous
		else if(direction == 'left') {

			selected.attr('data-selected', false);

			var next = selected.prev();

			next.attr('data-selected', true);

			var nextWidth = next.width();
			var position = container.position();
			var newPosition = position.left + nextWidth;

			container.animate({'left': newPosition});

		}
	});
}

//Slideshow.prototype.slide

$(document).ready(function(){
	var slideshow = new Slideshow();
});