如何修改Elastislide，使其无限循环 [英] How to modify Elastislide so it loops infinitely

问题描述

我一直在寻找一个可同时显示多个图像，反应灵敏并无限循环的图像轮播。

I've been searching for an image carousel that will display several images at once, is responsive and loops infinitely.

Elastislide似乎是最合适的（< a href = http://tympanus.net/Development/Elastislide/index2.html rel = nofollow> http://tympanus.net/Development/Elastislide/index2.html ）。

Elastislide seems to be the most suitable ( http://tympanus.net/Development/Elastislide/index2.html ).

我能够找到的唯一其他实用选择是John Nikolakis的Liquid Carousel，它似乎年代久远，不太优雅。

The only other practical option I've been able to find is Liquid Carousel by John Nikolakis which seems to be a fair bit older and less elegant.

我使用与 http://www.w3schools.com/js/js_timing.asp ，但是一旦到达终点，它就会停止，因为计时只是调用下一个按钮（.es-nav-next）。

I've got Elastislide to autoplay (sort of), using a similar method to the The clearTimeout() Method shown at http://www.w3schools.com/js/js_timing.asp, but once it reaches the end it stops, as the timing is just calling the next button (.es-nav-next).

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

I'm hoping someone can help me with modifying Elastislide to make it loop infinitely - or I'm open to suggestions for a different solution which meets my 3 requirements (listed above).

目前，我正在本地安装OpenCart，但可以提供一个静态示例并提供

At the moment I'm working on a local installation of OpenCart but I can put up a static sample and provide a link if that helps.

任何帮助或建议都将不胜感激，因为我是javascript的业余爱好者，因此在此上花了很多时间： ）

Any help or advice would be greatly appreciated, have spent many hours on this so far as I'm a complete amateur at javascript :)

推荐答案

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

Elastislide code has evolved and the above solution does not work. So I have developed my own solution.

此代码可以自动播放elastislide，并且在到达最后一张幻灯片时，它比起无限循环卡罗素更符合人体工程学。

This code makes elastislide autoplay and when arrived at last slide it returns to the first slide to be more ergonomic than the infinite loop caroussel.

此代码应在var self = this; <之后添加到 _initEvents 函数中； / code>

This code should be added in the _initEvents function after 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);

这篇关于如何修改Elastislide，使其无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！