javascript - 如何修改 Elastislide 使其无限循环

Question

我一直在寻找一个图像轮播，它可以同时显示多张图像，具有响应能力并且可以无限循环。

Elastislide 似乎是最合适的 ( http://tympanus.net/Development/Elastislide/index2.html )。

我能找到的唯一其他实用选项是 John Nikolakis 的 Liquid Carousel，它似乎有点老旧且不够优雅。

我已经让 Elastislide 自动播放(某种程度上)，使用与 http://www.w3schools.com/js/js_timing.asp 中所示的 clearTimeout() 方法类似的方法。 , 但一旦它到达终点就会停止，因为时间只是调用下一个按钮 (.es-nav-next)。

我希望有人可以帮助我修改 Elastislide 以使其无限循环 - 或者我愿意接受有关满足我的 3 个要求(上面列出的)的不同解决方案的建议。

目前我正在本地安装 OpenCart，但如果有帮助，我可以提供一个静态示例并提供一个链接。

任何帮助或建议将不胜感激，到目前为止我在 javascript 方面已经花了很多时间:)

Answer 1

Elastislide 代码已经发展，上述解决方案不起作用。所以我开发了自己的解决方案。

此代码使 elastislide 自动播放，当到达最后一张幻灯片时，它返回到第一张幻灯片，比无限循环轮播更符合人体工程学。

此代码应添加在 _initEvents 函数中 var self = this;

var translation = 0;
// width/height of an item ( <li> )
var itemSpace = this.options.orientation === 'horizontal' ? this.$items.outerWidth( true ) : this.$items.outerHeight( true );
// total width/height of the <ul>
var totalSpace = this.itemsCount * itemSpace;
// visible width/height
var visibleSpace = this.options.orientation === 'horizontal' ? this.$carousel.width() : this.$carousel.height();
//slide auto
window.setInterval(function(){
    //test if we should go to next slide or return to first slide
    if(totalSpace > translation + visibleSpace)
    {
        //go to next slide
        self._slide('next');
        //update translation
        translation += visibleSpace;
    }
    else
    {
        //return to first slide (infinite loop is too bad for ergonomics)
        self._slideTo(0);
        //set translation to 0
        translation = 0;
    }
}, 7000);