jQuery, jCarousel

I'm having trouble setting up jCarousel correctly. It seems like it's finding an extra list element on the ul and at the end of the scroll it scrolls a little bit more. I cannot understand why.

The html code is the following:

 <ul class="demo1">
                  开发者_如何学JAVA      <li><a href="http://www.youtube.com/watch?v=jfWPDGWP568">Video 1</a></li>
                        <li><a href="http://www.youtube.com/watch?v=BcIjxlLfcM4">Video 2</a></li>
                        <li><a href="http://www.youtube.com/watch?v=sYi7uEvEEmk">Video 3</a></li>
                        <li><a href="http://www.youtube.com/watch?v=CjBwNesFGoc">Video 4</a></li>
                        <li><a href="http://www.youtube.com/watch?v=dHbOOe8n2gY">Video 5</a></li>
                        <li><a href="http://www.youtube.com/watch?v=QcGcIB7X_l4">Video 6</a></li>
                        <li><a href="http://www.youtube.com/watch?v=Ee3XaPFT5XM">Video 7</a></li>
                        <li><a href="http://www.youtube.com/watch?v=DR91Rj1ZN1M">Video 8</a></li>
                    </ul>

and the javascript code is:

jQuery('.demo1').jcarousel({

                scroll: 1,
                visible: 4,
                buttonPrevHTML: '<button class="prev">προηγούμενο<\/button>',
                buttonNextHTML: '<button class="next">επόμενο<\/button>'
            }//, show()
            );

any help would be much appreciated.

I have posted the page here: http://www.44db.com/demo/yc

I have run into this too. It is very annoying! Here's why it might be happening. The width of your li items, plus any margins is more than the width of #maincontainer. That means the last li item spills over #maincontainer and the script will want to move that last bit in, leaving an extra click. One way to check this: assign an id to the last li, and make the width less, and see if that doesn't fix it. If so you need to make the #maincontainer wider.

I removed css { display:inline }, and any other size css property and it works for me!