jcarousel problems

Question

Right now I'm building a website. Here's the link: http://theoew.uuuq.com/home/

This probably won't make much sense unless you look at the website so just scan the next paragraph and then go to the site and just watch the slideshow go through.

I'm having a problem with the jcarousel slideshow. Let me first explain the basics of it. It automatically goes to the next slide unless you hover over it. For some reason after the third slide instead of going back to the first slide, it first moves about 20px to the right and then goes back to the first slide when you click the next button. Its looks like the slideshow thinks there is an extra slide that is only like 20px wide. I (obviously don't want this to happen.)

I have made a page with just the slideshow to make it a little easier for you guys to help me.

Oh, and I used the autoscrolling example to start out with.

Any help would be greatly appreciated.

Woops! here's the link for the slideshow by its self.

http://theoew.uuuq.com/simple%20carousel/

Answer 1

The problem is in your skin.css file. Make the following changes:

Change:

#mycarousel .slide {
    float:left;
    width:900px;
}

to:

#mycarousel .slide {
    float:left;
    width:940px;
}

and get rid of:

.jcarousel-clip {
    margin:0 30px;
}

Here is an example of it working correctly http://jsbin.com/omema The images wont show up correctly due to the absolute paths in the CSS that I had to edit

Answer 2

I fixed my own problem by making each slide the width of the slide container. It had to do with some messed up padding/margin and width in the css files.