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%' 
     }); 
    });  
}); 

Во-первых, я не знаю, если это возможно складывайте .contentContainer divs рядом друг с другом, не устанавливая ширину 300% на div .container. Поскольку сайт будет CMS, я не хочу продолжать изменять ширину деления .container. В один момент будет только один вид .contentContainer, поэтому я установил переполнение в скрытое.
Я тоже не могу найти хорошую функцию прокрутки, я имею в виду, что только один раз прокручивает div .container раз на 100%, в идеале я бы хотел, чтобы это работало скорее как слайд-шоу, т. Е. На цикле, если возможное. Любые предложения будут ценны!

Answer 1

Я обновил ваш JSFiddle. С помощью приведенного ниже кода вы можете подсчитать, сколько элементов вы получили в своем слайдере, а затем автоматически установите ширину%.

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