What I'm aiming to achieve in the end in something similar to the bbc site: with a side scroll from section to section. Here's my code and I'll explain the problem I'm facing:
jsFiddle: /
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, i.e. on a loop, if possible. Any suggestions would be greatly appreciated!

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/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, i.e. on a loop, if possible. Any suggestions would be greatly appreciated!

• javascript
• jquery
• css
• html

• Why don't you use a slider plugin? You can even write your own. – Terry Commented Sep 29, 2013 at 22:46
• 1 I answered something similar here: stackoverflow./a/18966254/1937302 – Ben Jackson Commented Sep 29, 2013 at 23:10

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