I have developed a basic carousel to cycle through a series of divs, but I am facing some issues. I want the carousel to loop continuously so that after reaching "slide 07," it goes back to "slide 01." Unlike using a carousel plugin, I prefer having an overhang where you can see a portion of the adjacent slides on either side when viewing a particular slide.
Check out my demonstration on jsFiddle here: http://jsfiddle.net/neal_fletcher/BBXnP/3/
HTML:
<div class="outerwrapper">
<div class="innerwrapper">
<div class="inner-slide">SLIDE 01</div>
<div class="inner-slide">SLIDE 02</div>
<div class="inner-slide">SLIDE 03</div>
<div class="inner-slide">SLIDE 04</div>
<div class="inner-slide">SLIDE 05</div>
<div class="inner-slide">SLIDE 06</div>
<div class="inner-slide">SLIDE 07</div>
</div>
</div>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
jQuery:
$(function () {
var animating = false,
outerwrap = $(".outerwrapper");
$("#right, #left").click(function () {
if (animating) {
return;
}
var dir = (this.id === "right") ? '+=' : '-=',
width = $(".inner-slide").width();
animating = true;
outerwrap.animate({
scrollLeft: dir + width
}, 600, function () {
animating = false;
});
});
});
In the end, I aim for the carousel to function similarly to the BBC homepage slider: , where you can view the next and previous sections below the current one.
I welcome any suggestions or recommendations!