0

我正在为我的网站使用 tympanus Elastislide Carousel Responsive jQuery 插件。该插件在我的网站上完美运行。但是，我希望卡索塞尔会自动播放。

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

滑块插件链接：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>

任何人都可以帮助滑块将如何自动播放？我试过自动播放：真的。但是，不工作。

4

3 回答 3

6

这是一个类似问题的修改答案： 如何修改 Elastislide 使其无限循环

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

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

// autoplay true || false
autoplay : true,

然后，您将能够在设置autoplay选项时设置值（真或假），就像您在上面的示例代码中尝试做的那样。

这段代码应该加在_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 的发展，此代码可能无法在未来的版本中使用。

于 2013-06-06T22:25:23.227 回答
1

尝试滚动属性，

scroll: 1

或者

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

http://sorgalla.com/jcarousel/

也看到这些

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

于 2013-05-18T12:18:36.547 回答
1

对于http://sorgalla.com/jcarousel/

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

$('.jcarousel')
  .jcarousel({
    wrap: 'circular'
  })
  .jcarouselAutoscroll({
    interval: 3000,
    target: '+=1',
    autostart: true
});
于 2014-02-02T12:25:38.750 回答