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

});

}）;