FULLSCREEN SLID SLIDER AUTOPLAY

时间:2013-12-26 08:48:14

标签: javascript jquery html5 jquery-slider

我正在使用此滑块。一切运作良好,但在自动播放中有问题。当我单击滑块上的导航箭头或底部的导航点上时。之后,自动播放无法正常工作。

这是链接CLICK HERE

自动播放功能不存在,您必须下载并自动播放:在Js中为true。

Js Name:jquery.slitslider.js

$.Slitslider.defaults = {
    // transitions speed
    speed : 800,
    // if true the item's slices will also animate the opacity value
    optOpacity : false,
    // amount (%) to translate both slices - adjust as necessary
    translateFactor : 230,
    // maximum possible angle
    maxAngle : 25,
    // maximum possible scale
    maxScale : 2,
    // slideshow on / off
    autoplay : true,
    // keyboard navigation
    keyboard : true,
    // time between transitions
    interval : 6000,
    // callbacks
    onBeforeChange : function( slide, idx ) {
        return false;
    },
    onAfterChange : function( slide, idx ) {
        return false;
    }
};

4 个答案:

答案 0 :(得分:6)

因为脚本包含类似的代码,每当您按下该功能时停止幻灯片放映

switch (keyCode) {

                case arrow.left :

                    self._stopSlideshow(); //this line stops autoplay
                    self._navigate( 'prev' );
                    break;

                case arrow.right :

                    self._stopSlideshow();
                    self._navigate( 'next' );
                    break;

            }

答案 1 :(得分:1)

没有什么可以做的,只需将autoplay选项设为true即可 autoplay:false,

///

    $.Slitslider.defaults = {
    // transitions speed
    speed : 800,
    // if true the item's slices will also animate the opacity value
    optOpacity : false,
    // amount (%) to translate both slices - adjust as necessary
    translateFactor : 230,
    // maximum possible angle
    maxAngle : 25,
    // maximum possible scale
    maxScale : 2,
    // slideshow on / off
    autoplay : true,
    // keyboard navigation
    keyboard : true,
    // time between transitions
    interval : 4000,
    // callbacks
    onBeforeChange : function( slide, idx ) { return false; },
    onAfterChange : function( slide, idx ) { return false; }
};

`

答案 2 :(得分:0)

您可以使用内置参数并在用户交互后再次开始幻灯片放映。

$('#slider').slitslider({
    autoplay: true, 
    interval: 6000,
    onAfterChange: function(slide, idx) {
        slitslider._startSlideshow(); // Starts the autoplay again
        return false;
    }
}),

答案 3 :(得分:0)

在jquery.slitslider.js中找到此代码并将2个false选项更改为true,然后将_startSlideshow()函数添加到其底部

_stopSlideshow: function() {
        if ( this.options.autoplay ) {

            clearTimeout( this.slideshow );
            this.isPlaying = true; // set this to true
            this.options.autoplay = true; // set this to true
            this._startSlideshow(); // Add this line

        }

    }