Tympanus Elastislide Carousel自动播放

Question

我在我的网站上使用鼓膜Elastislide Carousel Responsive jQuery插件.该插件在我的网站上完美运行.但是,我希望casousel会自动播放.

但是,我没有找到任何自动移动轮播的代码.

Slider Plugin链接:http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

我正在使用的java脚本

<script type="text/javascript">

    $( '#carousel' ).elastislide( {

    // orientation 'horizontal' || 'vertical'
    orientation : 'horizontal',

    // sliding speed
    speed : 500,

    // sliding easing
    easing : 'ease-in-out',

    // the minimum number of items to show.
    // when we resize the window, this will make sure minItems are always shown
    // (unless of course minItems is higher than the total number of elements)
    minItems : 3,

    // index of the current item (left most item of the carousel)
    start : 0,

    // click item callback
    onClick : function( el, position, evt ) { return false; },
    onReady : function() { return true; },
    onBeforeSlide : function() { return false; },
    onAfterSlide : function() { return false; }

    } );            

</script>

任何人都可以帮助滑块如何自动播放？我试过自动播放:是的.但是,不工作.

Answer 1

以下是来自类似问题的修改后的答案: 如何修改Elastislide,使其无限循环

这将使Elastislide自动播放,当在最后一张幻灯片上时,它将返回到第一张幻灯片.

在以下代码$.Elastislide.defaults后将此代码添加到对象start : 0,:

// autoplay true || false
autoplay : true,

然后autoplay,您可以在设置选项时设置值(true或false),就像您在上面的示例代码中尝试的那样.

此代码应添加到_initEventsvar之后的函数中self = this;

     if(this.options.autoplay == true){
            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
                    self._slideTo(0);
                    //set translation to 0
                    translation = 0;
                }
            }, 7000);
        }

请注意,随着Elastislide越过v1.1.0,此代码在将来的版本中可能无效.