Scriptaculous Sortable with Google's Carousel

[lun.ashis]

I tried using carousel for the same list that i made sortable. It
working fine but if any element is hidden on left side of "my-
carousel" while clicking next button of carousel to scroll the
sortable list than problem comes but without clicking next button it
works fine( i.e fresh load of sortable list)

Problem is:
After clicking carousel next button to scroll the sortable list when
first indexed element of the sortable list is hidden on left side as
mention above and if i try to move second indexed element to the third
index than i should hover over the fourth indexed element to see the
empty space on third index.

This is the html code that i am working on.

<div style="bottom: 0px;" id="mybar">
<div style="display: block;" class="carousel" id="my-carousel">
<a href="javascript:" class="carousel-control next listbar"
rel="next" ></a>
<a href="javascript:" class="prev listbar" rel="prev"> </a>
<div class="my-middle-part" id="my-middle">
<ul id="my-items">
// this list elements should be quite more to see the problem
<li id="drop_367" class="item" style="">
<div class="item"><div class="ref">First</div><div
title="delete" class="delete">x</div></div>
<a title="click to see details" ><div
class="notes">Wonderful</div></a>
</li>
</ul>
</div>
</div>
</div>

carousel:
new Carousel($('my-middle'), $('my-items').childElements(), $('my-
carousel').select('a.listbar'), {
duration: 0.5,
transition: 'spring',
visibleSlides: parseInt($('my-middle').getWidth()/$$('li.item')
[0].getWidth()),
circular: false});

sortable:
Sortable.create('my-items', {
tag:'li',
containment:['my-items''],
constraint:false,
overlap:'horizontal',
dropOnEmpty:true,
ghosting:false
});


Need some suggestions..

Thanks in advance