jCarousel - first items last after scroll rich last element

Question

I have a problem with my jcarousel component. The component is working fine, just after the first scroll is finished and restarted (it's about a circular scrolling), the first 3 element are not showed (blank items are showed). The scrolling is started with the 3rd element.

This problem is only when the first scroll is done, and a second one is started. Otherwise is working in the correct order, also all items are showed.

My code looks like:

 $(document).ready(function() { $('#mycarousel').jcarousel({ wrap : 'circular', scroll : 1, auto: 1, vertical : true, animation : 400, initCallback : function(carousel, state) { if (state == 'init') { carousel.clip.hover(function() { carousel.stopAuto(); addAlertMessage(carousel); }, function() { carousel.startAuto(); }); } } }); }); 

 .jcarousel ul { width: 20000em; position: relative; /* Optional, required in this case since it's a <ul> element */ list-style: none; margin: 0; padding: 0; } .jcarousel li.alertMessageStyle { /* Required only for block elements like <li>'s */ float: left; width: 100%; height: 60px; background-color : #FF6666; } .jcarousel li.infoMessageStyle { /* Required only for block elements like <li>'s */ float: left; width: 100%; height: 60px; background-color : #99FF99; } .jcarousel li { /* Required only for block elements like <li>'s */ float: left; width: 100%; height: 60px; background-color : #FF6666; } .jcarousel p { font-weight: bold; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 14px; vertical-align: middle; text-indent: 25px; } .alertMessagePanelStyle { position: relative; overflow: hidden; width: 100%; height: 50px; margin-top:10px; border-style: solid; border-width: 2px; } 

 <div id="alertMessagePanelId" class="alertMessagePanelStyle"> <ul id="mycarousel" class="jcarousel"> <li><p>Alert Message: 1</p></li> <li><p>Alert Message: 2</p></li> <li><p>Alert Message: 3</p></li> <li><p>Alert Message: 4</p></li> <li><p>Alert Message: 5</p></li> <li><p>Alert Message: 6</p></li> </ul> </div> 

Somebody had something similar?

Answer 1

@Pete answer is the fix for the problem. I also modified the JS code the make the mouse hover to stop the scrolling. I will post the code maybe will be helpfull for somebody.

$(document).ready(function() {

$('.jcarousel').jcarousel({
    wrap : 'circular',
    scroll : 1,
    vertical : true,
}).jcarouselAutoscroll({
    interval : 1000,
    target : '+=1',
    autostart : true
}).hover(function() {
    $(this).jcarouselAutoscroll('stop');
}, function() {
    $(this).jcarouselAutoscroll('start');

});

});