In my project, I aspire to create a layout similar to the BBC website: with a side scroll from section to section. Here is my code and the issue I am encountering:
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%'
});
});
});
My main concern at the moment is whether it's feasible to align the .contentContainer divs alongside each other without specifying a 300% width for the .container div. Since this site will be managed by a CMS, adjusting the width of the .container div frequently is not ideal. Additionally, only one .contentContainer div will be visible at a time, hence I've set the overflow to hidden.
I'm struggling to implement an effective scrolling function as well. The current one only scrolls the .container div once by 100%. Ideally, I would like it to operate more like a slideshow, continuously looping if possible. Any recommendations or solutions are welcomed!