The problem is due to the fact that the Carousel Viewer is inside a collapsed DIV to begin with. This causes all the measurements of the panels to return 0 instead of the correct numbers. One manual workaround is to explicitly set the dimensions of each panel inside the HTML, such as:
Code:
<div style="float: none; position: absolute; left: 0px; width:250px; height:180px" class="panel">
<img src="test_files/531q3n.jpg">
</div>
<div style="float: none; position: absolute; left: 10px; width:250px; height:180px" class="panel">
<img src="test_files/xp3hns.jpg">
</div>
<div style="float: none; position: absolute; left: 20px; width:250px; height:180px" class="panel">
<img src="test_files/11l7ls0.jpg">
</div>
<div style="float: none; position: absolute; left: 30px; width:250px; height:180px" class="panel">
<img src="test_files/119w28m.jpg">
</div>
<div style="float: none; position: absolute; left: 40px; width:250px; height:180px" class="panel">
<img src="test_files/34fcrxz.jpg">
</div>
Then inside stepcarousel.js, find the following line:
Code:
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth) //calculate next panel offset
and replace it with the below to use the specified values for the panel dimensions:
Code:
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.css('width')) //calculate next panel offset
Bookmarks