Question

I’m using the jQuery jCarousel on a blog of mine and have ran into a problem which is related to using the auto slideshow function and to wrap the content at the end, so it restarts from picture one.

When the slider comes to the last image it stands there for the amount of seconds I’ve instructed it to and then moves the image 20 pixels to the left because restart with image one. I’ve tried almost everything to find the error but just can’t seem to get my head around it.

I’ve made a preview of the slideshow and the error here: http://dl.dropbox.com/u/70953/slideshow.htm

You will see the error after the first image has changed and the second image changes (about 5 seconds after the site has loaded).

I’m using jQuery version 1.7.2.

My jCarousel options looks like this

$(document).ready(function() {
    $("#slider-holder").jcarousel({
        scroll: 1,
        auto: 3,
        wrap: 'last',
        initCallback: _init_slider,
        itemFirstInCallback: _set_slide,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });

    $('.field').each(function() {
        check_fields(this);
    });

    $('.field').focus(function() {
        if(this.title==this.value) {
            this.value = '';
            check_fields(this);
        }
    }).blur(function(){
        if(this.value=='') {
            this.value = this.title;
            check_fields(this);
        }
    });
});

Hope you can help me.

Thanks
– Mestika

Answer 1

I vaguely remember a problem like this. It has something to do with width on your css.

In your slider.css change 940 to 920.

#slider-holder .jcarousel-clip {
    height: 420px;
    overflow: hidden;
    position: relative;
    width: 940px;

}