jQueryTools Scrollable - jumps to last image in circular mode - jquery-tools

Question

jQuery Scrollable (with the navigator plugin) is showing the wrong slide when it first loads.
It behaves normally when I use it like this:
$(".scrollable").scrollable({}).navigator();
…but as soon I enable the 'circular' mode (to allow looping from the final slide back to the first):
$(".scrollable").scrollable({ circular: true }).navigator();
on page load, the final item is the first one show, even though item 1 is highlighted in the navigator. If you go through the images, when you get to the final one, it's shown a second time, and you only see the actual first image at the beginning of the second loop.
Any suggestions?
Here's my HTML for completeness:
<div class="column two-thirds scrollable" id="scrollable">
<a class="prev browse left">Previous</a>
<div class="items">
<div><img src="1.jpg" alt="" /></div>
<div><img src="2.jpg" alt="" /></div>
<div><img src="3.jpg" alt="" /></div>
<div><img src="4.jpg" alt="" /></div>
</div>
<a class="next browse right">Next</a>
<div class="naviWrapper">
<div class="navi"></div>
</div>
</div>

Answer 1

Here is a link to the same issue, suggesting that you replace your <img> tags with <div> tags that have a background image.
https://github.com/jquerytools/jquerytools/issues/47
I could not do that as some of my images had image maps. However, all my images had the same dimensions, so I put in image dimensions, i.e.
<img width=730 height=360 alt="first image" src="/images/my-image.jpg" />
And that seems to have solved it.