如何使carouFredSel自动播放和同步？

Question

I've got the carousel (I think it made of bootstrap) which I derived from the template from themeforest. It works well until I want to make it autoplay. I tried set interval:1000 but it still not work. Here is the script:

function InitPropertyCarousel() {
    if ($('.carousel.property .content li img').length !== 0) {
        $('.carousel.property .content li img').on({
            click: function(e) {
                var src = $(this).attr('src');
                var img = $(this).closest('.carousel.property').find('.preview img');
                img.attr('src', src);
                $('.carousel.property .content li').each(function() {
                    $(this).removeClass('active');
                });
                $(this).closest('li').addClass('active');
            }
        });
    }
}

This is the example link : http://preview.byaviators.com/template/realia/detail.html . (I tried put this code on jsfiddle but it's not working.)

Answer 1

I think you are using this carousel carouFredSell . And the real initialize code is this:

function InitCarousel() {
if ($('#main .carousel .content ul').length !== 0) {
    $('#main .carousel .content ul').carouFredSel({
        scroll: {
            items: 1
        },
        auto: false,
        next: {
            button: '#main .carousel-next',
            key: 'right'
        },
        prev: {
            button: '#main .carousel-prev',
            key: 'left'
        },
        //try if this fires after slide event ends
        onAfter: function () {
            var src = $(this).find('img').attr('src');
            var img = $(this).closest('.carousel.property').find('.preview img');
            img.attr('src', src);
            $('.carousel.property .content li').each(function() {
                $(this).removeClass('active');
            });
            $(this).closest('li').addClass('active');
        }
    });
}

if ($('.carousel-wrapper .content ul').length !== 0) {
    $('.carousel-wrapper .content ul').carouFredSel({
        scroll: {
            items: 1
        },
        auto: false,
        next: {
            button: '.carousel-wrapper .carousel-next',
            key: 'right'
        },
        prev: {
            button: '.carousel-wrapper .carousel-prev',
            key: 'left'
        }
    });
}
}

There you have option auto:false , try to set it to 'true`. And if this is the slider you use, you can check ths documentation from the link above.