如何修改Elastislide,使其无限循环

Question

我一直在寻找一个可以同时显示多个图像的图像轮播,响应并无限循环.

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

我能找到的唯一其他实用选择是John Nikolakis的Liquid Carousel,它看起来有点老了,不那么优雅.

我使用与http://www.w3schools.com/js/js_timing.asp中显示的clearTimeout()方法类似的方法来使用Elastislide进行自动播放(排序),但是一旦它到达终点就会停止,因为时间只是调用下一个按钮(.es-nav-next).

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

目前我正在进行OpenCart的本地安装,但我可以提供静态样本并提供链接,如果有帮助的话.

任何帮助或建议将不胜感激,已经花了很多时间,因为我是一个完整的业余javascript :)

Answer 1

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

此代码使弹性滑动自动播放,当到达最后一张幻灯片时,它返回到第一张幻灯片,比无限循环caroussel更符合人体工程学.

此代码应添加到_initEventsvar之后的函数中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);