Im having issues with the cycle2 carousel plugin. you can find my fiddle here and code at the bottom. In the fiddle it doesn't work completely but in Visual studio it only rotates to the right but when i go left(previous) and reach the first div it doesn't bring the last div to the front but just an empty spot.
here is the code:
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header">
<div id="arrows">
<div id="left">
<a class="slider" href="#" id="prev">
<img src="LeftArrow.png" />
</a>
</div>
<div id="right">
<a class="slider" href="#" id="next">
<img src="RightArrow.png" />
</a>
</div>
</div>
</div>
<div id="contentBox">
<div id="section-home" class="cycle-carousel-wrap" data-cycle-fx="carousel" data-cycle-carousel-visible="7" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-next="#next" data-cycle-prev="#prev" data-cycle-carousel-fluid="true">
<div class="box" style="background-color: blue;">
1
</div>
<div class="box" style="background-color: green;">
2
</div>
<div class="box" style="background-color: red;">
3
</div>
<div class="box" style="background-color: yellow;">
4
</div>
<div class="box" style="background-color: purple;">
5
</div>
<div class="box" style="background-color: orange;">
6
</div>
<div class="box" style="background-color: blueviolet;">
7
</div>
</div>
</div>
</div>
<div id="script">
<script type="text/javascript">
$('body').niceScroll();
var tempWidth = 0;
$('#contentBox .box').each(function () {
tempWidth += $(this).outerWidth(true);
});
$('#contentBox').css({ 'width': tempWidth });
$.fn.cycle.defaults.autoSelector = '.cycle-carousel-wrap';
</script>
</div>
</form>
the divs are floated left and have a width of 550px. Any help will be greatly appreciated
