Slider JS

gistfile1.js

$(document).ready(function(){

	// transition can be fade or slide
	var transition = 'slide';

	if(transition == 'slide'){
		$('.slider').children().wrapAll('<div class="slider-container"></div>');
		$('.slider-container').css('width', $('.slider').width() * $('.slider .content').length );
		$.each($('.slider .content'), function(index, value){
			$(this).addClass('slide');
			$(this).css('width', $('.slider').width());
		});
	}

	$('.slider').append('<div class="slider-left"></div><div class="slider-right"></div>');

	$('.slider-right').click(function(){
		if(transition == 'slide'){
			if( Math.abs($('.slider-container').position().left - $('.slider').width()) >= ($('.slider').width() * $('.slider .content').length)  ){
				$('.slider-container').css('left', 0);
			} else {
				$('.slider-container').css('left', $('.slider-container').position().left - $('.slider').width() );
			}
		} else if(transition == 'fade'){
			active = $(this).parent().find('.content.active');
			if($(active).next('.content').length){
				$(active).next('.content').addClass('active');
			} else {
				$(this).parent().children('.content').first().addClass('active');
			}
			$(active).removeClass('active');
		}
	});

	$('.slider-left').click(function(){
		if(transition == 'slide'){
			if($('.slider-container').position().left == 0){
				$('.slider-container').css('left', -$('.slider').width() * ($('.slider .content').length -1) );
			} else {
				$('.slider-container').css('left', $('.slider-container').position().left + $('.slider').width() );
			}
		} else if(transition == 'fade'){
			active = $(this).parent().find('.content.active');
			if($(active).prev('.content').length){
				$(active).prev('.content').addClass('active');
			} else {
				$(this).parent().children('.content').last().addClass('active');
			}
			$(active).removeClass('active');
		}
	});
});

$(window).resize(function(){
	if(transition == 'slide'){
		$.each($('.slider .content'), function(index, value){
			$(this).css('left', $('.slider').width() * index);
		});
	}

});