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

Question

我从 themeforest 的模板中得到了轮播(我认为它是由 bootstrap 制作的)。它运行良好，直到我想让它自动播放。我尝试设置 interval:1000 但它仍然不起作用。这是脚本:

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');
            }
        });
    }
}

这是示例链接:http://preview.byaviators.com/template/realia/detail.html . (我尝试将此代码放在 jsfiddle 上，但它不起作用。)

Answer 1

我想你正在使用这个轮播carouFredSell .真正的初始化代码是这样的:

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'
        }
    });
}
}

你有选项 auto:false，尝试将它设置为“true”。如果这是您使用的 slider ，您可以从上面的链接查看文档。