Question

这是针对jcarousel的滑块。我正在尝试制作一个不停的滑块。这里的问题是当滑块到达末端滑块时它会自动停止。我需要代码，当滑块到达终点时自动开始表单开始。

(function($) {
    $(function() {
        $('.jcarousel').jcarousel();

        $('.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();



            $('.jcarousel').jcarouselAutoscroll({
            interval: 3500
           });

            $('.jcarousel').jcarouselAutoscroll({
            autostart: true
            });

    });

})(jQuery);

Answer 1

这是jCarousel开发人员记录的一个问题：wrap：circular已经破坏，直到下一个版本才会被修复。

https://github.com/jsor/jcarousel/issues/search?q=circular

https://github.com/jsor/jcarousel/issues/182

如果现在已修好，请尝试：

$('.jcarousel').jcarousel({
    wrap: 'both'
});

如果不起作用：

jCarouselLite有一个连续选项，可以更好地为您服务：

http://www.gmarwaha.com/jquery/jcarousellite/

另请参阅http://www.gmarwaha.com/jquery/jcarousellite/#doc和“循环”设置

在许多方面（基于）jCarousel类似，但更轻巧，更灵活。

潜在的问题：如果您在连续模式下滚动多个项目，如果项目总数不能完全被您滚动的数字整除，则可以跳过一些项目。

编辑：不用说，如果wrap: 'both'被破坏，我不知道如何使用jCarousel完成此任务。

Answer 2

试试这个

(function($) {
    $(function() {
    $('#jcarousel').jcarousel({
        wrap: 'circular'
    });

        $('.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();



            $('.jcarousel').jcarouselAutoscroll({
            interval: 3500
           });

            $('.jcarousel').jcarouselAutoscroll({
            autostart: true
            });

    });

})(jQuery);

当幻灯片到达jcarousel结束时滑块自动停止

2 个答案: