jCarousel - erste Artikel zuletzt nach Scroll reichen letzten Element

Question

Ich habe ein Problem mit meiner jcarousel Komponente. Die Komponente funktioniert gut, gleich nachdem der erste Bildlauf beendet und neu gestartet wurde (es handelt sich um ein zirkulares Scrollen), die ersten 3 Elemente werden nicht angezeigt (leere Elemente werden angezeigt). Das Scrollen wird mit dem 3. Element gestartet.

Dieses Problem tritt nur auf, wenn der erste Bildlauf abgeschlossen und ein zweiter Bildlauf gestartet wurde. Ansonsten funktioniert in der richtigen Reihenfolge, auch alle Artikel werden angezeigt.

Mein Code sieht so aus:

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

.jcarousel ul { 
 
\t width: 20000em; 
 
\t position: relative; 
 
\t /* Optional, required in this case since it's a <ul> element */ 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.jcarousel li.alertMessageStyle { 
 
\t /* Required only for block elements like <li>'s */ 
 
\t float: left; 
 
\t width: 100%; 
 
\t height: 60px; 
 
\t background-color : #FF6666; 
 
} 
 

 
.jcarousel li.infoMessageStyle { 
 
\t /* Required only for block elements like <li>'s */ 
 
\t float: left; 
 
\t width: 100%; 
 
\t height: 60px; 
 
\t background-color : #99FF99; 
 
} 
 

 
.jcarousel li { 
 
\t /* Required only for block elements like <li>'s */ 
 
\t float: left; 
 
\t width: 100%; 
 
\t height: 60px; 
 
\t background-color : #FF6666; 
 
} 
 

 
.jcarousel p { 
 
\t font-weight: bold; 
 
\t font-family: "Comic Sans MS", "Comic Sans", cursive; 
 
\t font-size: 14px; 
 
\t vertical-align: middle; 
 
\t text-indent: 25px; 
 
\t 
 
} 
 

 
.alertMessagePanelStyle { 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t margin-top:10px; 
 
\t border-style: solid; 
 
\t border-width: 2px; 
 
}

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

 

jemand etwas ähnliches hatte?

Answer 1

@Pete Antwort ist die Lösung für das Problem. Ich änderte auch den JS-Code, den die Maus den Mauszeiger schweben lässt, um das Scrollen zu stoppen. Ich werde den Code posten, vielleicht wird es für jemanden hilfreich sein.

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

}); 

});