[jQuery] [jCarousel] Question about weird autoscrolling

[jjsanders]

Hello everyone,

I am using jcaousel autoscoll autoscrolling based on  this example:
http://sorgalla.com/projects/jcarousel/examples/static_auto.html.

In stead of pictures I am using just plain text:

<div style="padding-bottom:10px">
        <ul id="mycarousel" class ="jcarousel-skin-tango">
        <li>
        <p class="kopKlein" style="width:120px">Artikel 1</p>

        <p class="tekstVak" style="width:120px">
                <b>Lees alles over onze nieuwe content rotator</b>
                 <a href="http://mbalance/news/news_item/7";>read more&gt;</a>
        </p>
</li>
<li>
        <p class="kopKlein" style="width:120px">Artikel 2</p>
        <p class="tekstVak" style="width:120px">

                <b>Blaat je </b>
                 <a href="http://mbalance/news/news_item/5";>read more&gt;</a>
        </p>
</li>
<li>
        <p class="kopKlein" style="width:120px">Artikel 3</p>
        <p class="tekstVak" style="width:120px">
                <b>Dit gaat nergens over </b>

                 <a href="http://mbalance/news/news_item/6";>read more&gt;</a>
        </p>
</li>
<li>
        <p class="kopKlein" style="width:120px">Artikel 4</p>
        <p class="tekstVak" style="width:120px">
                <b>test head</b>
                 <a href="http://mbalance/news/news_item/4";>read more&gt;</a>

        </p>
</li>
<li>
        <p class="kopKlein" style="width:120px">Artikel 5</p>
        <p class="tekstVak" style="width:120px">
                <b>Interesting subhead</b>
                 <a href="http://mbalance/news/news_item/2";>read more&gt;</a>
        </p>

</li>
</ul>
</div>


I got it all working but there is one weird thing. When the page loads
it starts by Artikel 1, then it jumps to artikel 4 en goes to artikel
5. Than it jumps back to artikel 1 and starts over again.

These are my settings:

function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next
button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the
clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});


Can anyone tell me what I'm doing wrong?