jCarousel-滚动丰富的最后一个元素之后的第一个项目

Question

我的jcarousel组件有问题。 该组件运行良好，在完成第一次滚动并重新启动后（大约是循环滚动），未显示前三个元素（显示了空白项目）。 滚动从第三个元素开始。

仅在完成第一个滚动并启动第二个滚动时才出现此问题。 否则，将以正确的顺序工作，并且还会显示所有项目。

我的代码如下：

 $(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> 

有人有类似的东西吗？

Answer 1

@Pete答案是解决此问题的方法。 我还修改了JS代码，使鼠标悬停以停止滚动。 我将发布代码，也许会对某人有所帮助。

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

});

}）;