Autoscroll and fade functions not working together.

[amityweb]

I am using some functions to produce a fade transition and then autoscroll. But seems they wont work with each other.

The following code results in the slide moving one, then stopping. If I click Next to go through all slides back to the first, the autoscroll kicks in and works fine. If I change target for autoscroll to -=1 then it works fine, but goes backwards of course, but I want +=1.

Thanks

 var carousel = $('.jcarousel').jcarousel({
    list        : '.items',
    items       : '.i',
    wrap        : 'circular', // for good measure
    animation: {
        duration: 0 // swap slides immediately
    }
 }).jcarouselAutoscroll({
    interval: 1000,
    target: '+=1',
    autostart: true
 });

// fade hack
 carousel.jcarousel('items').hide();
 carousel.jcarousel('first').show();
 carousel.on('jcarousel:visiblein', function(event, carousel) {
    $(event.target).fadeIn();
 });
 carousel.on('jcarousel:visibleout', function(event, carousel) {
    $(event.target).fadeOut();

 });

$('.jcarousel-control-prev')
    .on('jcarouselcontrol:active', function() {
        $(this).removeClass('inactive');
    })
    .on('jcarouselcontrol:inactive', function() {
        $(this).addClass('inactive');
    })
    .jcarouselControl({
        target: '-=1'
    });

$('.jcarousel-control-next')
    .on('jcarouselcontrol:active', function() {
        $(this).removeClass('inactive');
    })
    .on('jcarouselcontrol:inactive', function() {
        $(this).addClass('inactive');
    })
    .jcarouselControl({
        target: '+=1'
    });

$('.jcarousel-pagination')
    .on('jcarouselpagination:active', 'a', function() {
        $(this).addClass('active');
    })
    .on('jcarouselpagination:inactive', 'a', function() {
        $(this).removeClass('active');
    })
    .jcarouselPagination();