jQuery：水平滚动到div

Question

What I'm aiming to achieve in the end in something similar to the bbc site: http://www.bbc.co.uk with a side scroll from section to section. Here's my code and I'll explain the problem I'm facing:
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%'
        });
    });    
});

Firstly I don't know if it's possible to stack the .contentContainer divs next to each other without having to set a 300% width on the .container div. As the site is going to be CMS I don't want to keep changing the width of the .container div to suit. There will only ever be one .contentContainer div in view at one time too, thus I've set the overflow to hidden.
I can't seem to figure out a nice scroll function too, the one I have currently only scrolls the .container div once by 100%, ideally I'd want this to work more like a slideshow, ie on a loop, if possible. Any suggestions would be greatly appreciated!

Answer 1

I have updated your JSFiddle . With the code below you can count how many elements you got inside your slider and thereafter set the % width automatically.

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