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

以下是来自类似问题的修改后的答案： How to modify Elastislide so it loops infinitely

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

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

// autoplay true || false
autoplay : true,

然后，您可以在设置选项时设置autoplay值（true或false），就像您在上面的示例代码中尝试的那样。

此代码应添加到_initEvents

之后的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，此代码在将来的版本中可能无效。

Answer 2

尝试滚动属性，

scroll: 1

或

你可以在这里找到答案，给出所有类型的旋转木马滑块

http://sorgalla.com/jcarousel/

也看到了这些

http://sorgalla.com/projects/jcarousel/examples/static_auto.html

Answer 3

http://sorgalla.com/jcarousel/

请参阅Autoscroll插件：http://sorgalla.com/jcarousel/docs/plugins/autoscroll/

$('.jcarousel')
  .jcarousel({
    wrap: 'circular'
  })
  .jcarouselAutoscroll({
    interval: 3000,
    target: '+=1',
    autostart: true
});

Tympanus Elastislide Carousel自动播放

3 个答案: