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');

});

});