Slider na całą szerokość strony

Question

Witajcie. Tworzę slider na całą szeorkość strony. Mam więc #main-container w którym zawiera się cała szerokość strony, .slide, które są pojedynczym slajdem i #all-slides, które znajduje się wewnątrz #main-container, a w środku znajdują się wszystkie pojedyncze slajdy. Problem polegał na ustaleniu szerokości tego pojedynczego slajdu. Jeśli zrobię to w css (width: 100%), to ten div rozumie, że chodzi mi o zapełnienie 100% diva #all-slide, a nie #main-container. Dlatego wpadłem na pomysł, żeby zrobić to za pomocą jQuery. Niby wszystko działa, ale przy chociażby zmianie rozmiaru okna wszystko się rozjeżdża. Próbowałem się bawić resize, ale też nie mogę sobie z tym poradzić. Pomożecie?

 

  $(function(){
  	var slideSize = $('#main-container').css('width'),
  		slideCount = $('.slide').length,
  		allSlides = (slideCount*parseInt(slideSize) ) + 'px';

  	$('.slide').css('width', slideSize);
  	$('#all-slides').css('width', allSlides);

   	$("#l-start").click(function(){
  		var newPosition = -parseInt(slideSize) + 'px';
  		$("#all-slides").animate({
  			left: 0
  		}, 800);
  	});
  	$("#l-o-mnie").click(function(){
  		var newPosition = -parseInt(slideSize) + 'px';
  		$("#all-slides").animate({
  			left: newPosition
  		}, 800);
  	});

  	 $("#l-umiejetnosci").click(function(){
  		var newPosition = -parseInt(slideSize) * 2 + 'px';
  		$("#all-slides").animate({
  			left: newPosition
  		}, 800);
  	});

  	$("#l-portfolio").click(function(){
  		var newPosition = -parseInt(slideSize) * 3 + 'px';
  		$("#all-slides").animate({
  			left: newPosition
  		}, 800);
  	});

  });