jQuery : div에 수평 스크롤

Question

끝 부분에서 bbc 사이트와 비슷한 점을 달성하고자하는 대상은 섹션에서 섹션까지 스크롤하는 쪽이 http://www.bbc.co.uk입니다. 여기에 내 코드이고 내가 직면하고있어 문제를 설명 할 것이다 :
jsFiddle : http://jsfiddle.net/neal_fletcher/kzQFQ/2/
HTML :

<div class="wrapper"> 
    <div class="container"> 
     <div class="contentContainer red"></div> 
     <div class="contentContainer blue"></div> 
     <div class="contentContainer orange"></div> 
    </div> 
</div> 

<div class="left">LEFT</div> 
<div class="right">RIGHT</div> 

jQuery를 :가에 가능하다면

$(document).ready(function() { 
    $('.right').click(function() { 
     $('.container').animate({ 
      'left': '-100%' 
     }); 
    }); 
    $('.left').click(function() { 
     $('.container').animate({ 
      'left': '0%' 
     }); 
    });  
}); 

는 첫째 모르겠어요를 .container div에 300 % 너비를 설정하지 않고도 서로 옆에 .contentContainer div를 쌓으십시오. 사이트가 CMS가 될 것이므로 .container div의 너비를 계속 변경하고 싶지는 않습니다. 한 번에 하나의보기에서만 하나의 .contentContainer div가있을 것이므로이 오버플로를 숨김으로 설정했습니다.
나는 멋진 스크롤 기능도 알아낼 수 없다. 현재는 .container div를 100 % 스크롤하고, 이상적으로는 슬라이드 쇼처럼 더 이상 작동하도록하고 싶다. if 가능한. 어떤 제안이라도 대단히 감사하겠습니다!

Answer 1

JSFiddle을 업데이트했습니다. 아래 코드를 사용하여 슬라이더 안에있는 요소의 수를 계산 한 다음 % 너비를 자동으로 설정할 수 있습니다.

var length = $('div .container').children('div .contentContainer').length; 
$(".container").width(length*100 +'%');