7 答え

私は3スライダーのページを持っていたのと同じ問題を抱えていました。そこでは、5秒ごとに1を変えたいと思っていました。つまり、それぞれ15秒の休止時間があり、2回目は5秒の遅延が必要でした。 10秒の遅延。私は上記のソリューションと他の多くの試みを試みましたが、複数のスライダーで動作するようにはできませんでした。私は新しい設定 "recurPauseTime"を追加し、次にnivo:animFinished関数に以下を追加することで修正しました:

clearInterval(timer);
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.recurPauseTime);

これにより私は次のように設定することができました:

slider1:

pauseTime: 5000,
recurPauseTime:15000 

slider2:

pauseTime: 10000,
recurPauseTime:15000 

スライダー3:

pauseTime: 15000,
recurPauseTime:15000 
2
追加された

技術的には、Nivoの実行中にpauseTimeを変更することはできますが、このような操作のネイティブサポートを提供していないため、表示するよりもはるかに難しくなります。

より直観的なアプローチは、新しいスライドを確認して、目的のファストスライドにいるかどうかを確認することです。その場合は、2秒待ってスライドを前進させてください。

Nivoオプション:

afterLoad: slideCheck(),
afterChange: slideCheck()

グローバル関数

function slideCheck(){
    if( $('#slider .nivo-control').eq(0).hasClass('active') ){
        setTimeout(function(){
            $('#slider').find('a.nivo-nextNav').click()
        },2000);
    }
} 

edit: It turns out that nivo's slideChange callback is not fired on the very first slide. So we need to hook in twice.

1
追加された
いいえ、このスクリプトは2秒待ってから次のスライドボタンをクリックします。ただし、1つの欠点があります。手動で「高速スライド」を進める場合は、次のスライドを進めるためにタイマーを待機させます。これが問題かどうかは、あなた次第です。私はその場合もキャッチを追加することができます。
追加された 著者 Sinetheta,
ご回答有難うございます;私はあなたがここで何をしたかを見ます。しかし、これは私の問題を正確に解決するものではありません。最初のスライドは2秒、その他のスライドは5秒間表示されます。あなたのソリューションでは、nivoSliderのデフォルトのpauseTime(5s)にsetTimeout(2s)を追加するので、最初のスライドは他のすべてのスライドより常に長く(7秒)表示されます。
追加された 著者 iHaveacomputer,

あなたはおそらく今までにあなたの問題を解決しましたが、私は同じ質問をしました。すべてのオプションを調べた後、私は簡単に思いついた、私は美しい、解決策を言わない。私が使用しているスライドショーは「フェード」エフェクトを使用しているため、ナビゲーション(キーボード、一時停止、方向コントロールなど)は、最初の画像をhtmlに2回配置することはありませんでした。このようにして、最初の画像は残りの画像の2倍の長さで表示され、画像は実際に2度読み込まれます。

繰り返しますが、セクシーな解決策ではありませんが、十分に機能しています。

1
追加された

私は同様の問題を抱えていた。私はフェードトランジションを使用していますが、animSpeedは最初のスライドを除くすべてのスライドのpauseTimeの一部です。だから、私はこれらの設定を持っていた:

    effect: 'fade',
    animSpeed: 3000,
    pauseTime: 7000,

そして、最初のスライドが7秒間表示されたように見え、フェード効果が始まる前のすべてのスライドがわずか4秒間表示されます。

タイムアウトを4000に設定してSinethetaのソリューションを試しましたが、最初のスライドではトランジションが早く始まりましたが、今度は2番目のスライドが本当に長い時間表示されます。これで、トランジションを開始する前に、7000 + 4000の2番目のスライドが表示されるようになりました。

他に誰がこれを見たことがありますか?どんな解決策ですか?

ありがとう、

ジェリー

1
追加された

さて、私は本当に美味しい解決策を見つけました。 afterLoad:function()の下にafterChange:function()を追加して、後続のすべてのスライドのトランジションを設定する必要がありました。誰でも良い考えがありますか?

ここに私の$(window).load(function():

    $(window).load(function() {
        $('#slider').nivoSlider({
            effect: 'fade', 
            animSpeed: 3000,//Slide transition speed
            pauseTime: 7000,//How long each slide will show   
            pauseOnHover: false,//Stop animation while hovering
              /* directionNav and directionNavHide added so that 
                afterLoad: function below can find 'Next' link */
            directionNav: true,//Hide Next & Prev navigation
            directionNavHide: true,//Only show on hover
              /* prevText and nextText set to nothing so they don't show */
            prevText: '',//Prev directionNav text
            nextText: '',//Next directionNav text
            controlNav: false,//Hide 1,2,3... navigation
            randomStart: true,//Start on a random slide
              /* Below changes first slide display time */
            afterLoad: function(){
                setTimeout(function(){
                    $('#slider').find('a.nivo-nextNav').click()
                },4000);        
            },      
              /* Code above changes first slide duisplay time, but then second 
              slide display time is too long. Below code sets display time for 
              all subsequent slides. */
            afterChange: function(){
                setTimeout(function(){
                    $('#slider').find('a.nivo-nextNav').click()
                },4000);        
            }
        });
    });

ありがとう、

ジェリー

1
追加された

Sinethetaのおかげで、私をここに正しい方向に向けることができました:

$(window).load(function() {
    $('#slider').nivoSlider({
        pauseTime:5000,
        pauseOnHover: false,
        controlNav:false,
        directionNav:true,
        directionNavHide:true,
        effect:'sliceDown',
        captionOpacity: 0.9,
        afterLoad: function(){
            setTimeout(function(){
                $('#slider').find('a.nivo-nextNav').click()
            },2000);        
        },
    });
});
0
追加された
それは初めての場合にのみ発射されます。しかし、おそらく私はあなたの "最初のスライド"の意味を誤解していると思う;)
追加された 著者 Sinetheta,

私はクリックイベントごとに効果を変えたいと思っていました。

私は "設定" varを変更する方法を見つけることができませんでしたので、元のスクリプトを修正する必要がありました。

jquery.nivo.slider.js

            $(slider).on('click', 'a.nivo-prevNav', function(){
            settings.effect = "slideInLeft";
            if(vars.running) { return false; }
            clearInterval(timer);
            timer = '';
            vars.currentSlide -= 2;
            nivoRun(slider, kids, settings, 'prev');
        });

        $(slider).on('click', 'a.nivo-nextNav', function(){
            settings.effect = "slideInRight";
            if(vars.running) { return false; }
            clearInterval(timer);
            timer = '';
            nivoRun(slider, kids, settings, 'next');
        });

イベントの "設定" varにアクセスできるようにすると便利です:beforeChange、afterChange ...

0
追加された