如何修改 Elastislide 使其无限循环

问题描述

我一直在寻找可以同时显示多张图像、响应迅速且无限循环的图像轮播.

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

Elastislide 似乎是最合适的(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.

我已经让 Elastislide 自动播放(有点)，使用与 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.

此代码使 elasticslide 自动播放，当到达最后一张幻灯片时，它会返回到第一张幻灯片，比无限循环旋转木马更符合人体工程学.

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.

这段代码应该添加在_initEvents函数中var self = this;

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 使其无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！