jCarousel Autoscroll navigation setup

I'm having a little trouble setting up jCarousel -

www.lovejungle.com/store

Basically I want it to look like the slide show on www.ripcurl.com.au/?home

I've got as far as implementing the jCarousel - But the configuration and navigation buttons arn't right.

AS you will see jCarousel starts on the first image, but then skips two images, and lands on the fourth image in the set. I'm not sure why it's doing that ? Any ideas?

Secondly - I can't get the default 1,2,3,4,5 navigation happening down the bottom left.

I'm assuming it's something to do with my javascript function (i'm not very up on it)

<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
    // Disable a开发者_JAVA百科utoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(1);
    });

    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: 3,
        wrap: 'both',
        initCallback: mycarousel_initCallback
    });
});

</script>

Any help would be greatly appreciated.

You can check out the formatting here :

www.sorgalla.com/projects/jcarousel/

As far as your scrolling problem, there's a configuration option that tells JCarousel how many items to scroll through at a time which is set to 3 by default.

jQuery(document).ready(
    function() { jQuery('#mycarousel').jcarousel({ 
        auto: 3, 
        wrap: 'both',  
        initCallback: mycarousel_initCallback,
        scroll: 1
    }); 
});

I added scroll: 1 to your initialization function which will tell JCarousel to scroll 1 item at a time.

The function mycarousel_initCallback must be

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

works for me!!!