Nivo Slider Verzögerung nur das erste Bild

Question

IT WORKS !!! http://jsfiddle.net/jupago/W6CkP/

auf diesen Thread Basierend: Pause Nivo Slider

Ich konnte es auf dem ersten Bild stoppen Figur machen.

Hier ist mein Code. Ich Stoppen der Animation zweimal, weil ich es will auch nach Diashow beenden endet:

$(window).load(function() { 
    $('#slider').nivoSlider({ 
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' 
    animSpeed: 500, // Slide transition speed 
    pauseTime: 5000, 
    startSlide: 0, // Set starting Slide (0 index) 
    directionNav: true, // Next & Prev navigation 
    controlNav: false, // 1,2,3... navigation 
    controlNavThumbs: false, // Use thumbnails for Control Nav 
    pauseOnHover: false, // Stop animation while hovering 
    manualAdvance: false, // Force manual transitions 
    prevText: 'previous', // Prev directionNav text 
    nextText: 'next', // Next directionNav text 
    randomStart: false, // Start on a random slide 
    slideshowEnd: function(){   
      $('#slider').data('nivoslider').stop(); 
    setTimeout("$('#slider').data('nivoslider').start()",10000); 
     }, // Triggers when last slide is shown 
    }); 

    $('#slider').data('nivoslider').stop(); 
    setTimeout("$('#slider').data('nivoslider').start()",10000); 
}); 

---

Original-Beitrag hier:

ich das NIVO Slider Plugin und während ich es bekommen habe Um reibungslos arbeiten zu können, muss das erste Bild länger dauern als der Rest (das erste Bild enthält Text).

Ich habe eine Arbeits Geige hier erstellt: jsfiddle.net/jupago/W6CkP

, dass es viel einfacher zu verstehen, das Problem machen sollte. Ich füge noch HTML-Code von Geige vor als Referenz:

HTML:

<div class="slider-wrapper"> 
    <div id="slider" class="nivoSlider"> 
<img src="http://goo.gl/I4c65" /> 
<img src="http://goo.gl/acxBF"/> 
<img src="http://goo.gl/GBzYF"/> 
<img src="http://goo.gl/BC2EA" /> 
<img src="http://goo.gl/9Sd69" /> 
<img src="http://goo.gl/qOaZl"/> 
<img src="http://goo.gl/btswq" /> 
    </div> 
</div> 

JS NIVO:

$('#slider').nivoSlider({ 
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' 
    animSpeed: 500, // Slide transition speed 
    pauseTime: 5000, // How long each slide will show 
    startSlide: 0, // Set starting Slide (0 index) 
    directionNav: true, // Next & Prev navigation 
    controlNav: false, // 1,2,3... navigation 
    controlNavThumbs: false, // Use thumbnails for Control Nav 
    pauseOnHover: false, // Stop animation while hovering 
    manualAdvance: false, // Force manual transitions 
    prevText: 'next', // Prev directionNav text 
    nextText: 'previous;', // Next directionNav text 
    randomStart: false, // Start on a random slide 
    beforeChange: function(){}, // Triggers before a slide transition 
    afterChange: function(){}, // Triggers after a slide transition 
    slideshowEnd: function(){}, // Triggers after all slides have been shown 
    lastSlide: function(){}, // Triggers when last slide is shown 
    afterLoad: function(){} // Triggers when slider has loaded 
}); 

Answer 1

Sie könnten so etwas wie dies versuchen:

$(window).load(function() { 
    var waited = false; 
    $('#slider').nivoSlider({ 
    //... 
    beforeChange: function(){ 
     if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide 
      //wait a little longer 
      $('#slider').data('nivoslider').stop(); 
      setTimeout(function(){ 
       waited = true; 
       $('#slider').data('nivoslider').start(); 
      }, 2000); //2 seconds 
     } else { 
      waited = false; 
     } 
    }, 
    //... 
    }); 
}); 

EDIT: Ich weiß nicht, ob die settimeout ist wirklich notwendig, vielleicht nur return false würde es tun.

$(window).load(function() { 
    var waited = false; 
    $('#slider').nivoSlider({ 
    //... 
    beforeChange: function(){ 
     if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide 
      //wait a little longer 
      return false; 
     } else { 
      waited = false; 
     } 
    }, 
    //... 
    }); 
}); 

Answer 2

ich nicht versucht haben, so garantieren kann ich nicht, dass es funktionieren wird, aber eines der Dinge, die Sie tatsächlich die pauseTime auf eine Funktion statt einer konstanten, 5000 Einstellung wird versuchen könnte. Sie würden bestimmen, auf welchem ​​Bild Sie sich befinden, und wenn es das gewünschte Bild ist, würden Sie die Zeit auf etwas wie setzen, andernfalls würden Sie es auf 5000 setzen.

Nur um zu wiederholen: Ich habe dies weder getestet, noch kann ich garantieren, dass es funktioniert. Wenn dies jedoch der Fall ist, bietet es Ihnen eine erhebliche zusätzliche Flexibilität. Hier

ist der Code, den Sie verwenden würden, wenn Sie diese, um versuchen zu implementieren wollte:

... 
pauseTime: function() { 
    if ($("#slider").data("nivo:vars").currentSlide == 0) { 
     return 8000; 
    } 
    return 5000; 
}, 
... 

Alternativ kann, wenn dies nicht in der pauseTime nicht funktioniert, dann würde ich versuchen, fast das gleiche setzen Sache in othe beforeChange Option, etwa so:

... 
beforeChange: function() { 
    if ($("#slider").data("nivo:vars").currentSlide == 0) { 
     $("#slider").delay(3000); 
    } 
    return; 
}, 
... 

WICHTIGER HINWEIS: Sie sollten die ....currentSlide == 0) tatsächlich ersetzen in die obigen Beispiele mit dem Accessor für die Option startSlide von Nivo Slider, besonders wenn Sie den Startindex des Sliders ändern möchten.Ich erinnere mich nicht, was die Accessor ist, aber ich würde die Abbildung, dass es etwas aussehen würde:

....currentSlide == settings.startSlide) 

wo settings ist der Name der Einstellungen Variable, die Nivo verwendet.

UPDATE

Basierend auf den Fehler, die Sie in Ihren Kommentaren erwähnt, mein nächster Vorschlag ist, dass Sie die gleichen zwei Lösungen erneut versuchen, aber diesmal die setting.startSlide mit 0 ersetzen. Wenn das nicht funktioniert (obwohl es sollte), müssen wir zurück zum Zeichenbrett gehen. Wenn es funktioniert, ersetzen Sie die 0 durch this.startSlide. Lass mich wissen, wie das funktioniert.

Answer 3

ich getan habe dies und funktioniert gut:

In der HTML-Seite ändern:

$(window).load(function() { 
    $('#slider').nivoSlider({... 

von

$(document).ready(function() { 
    $('#slider').nivoSlider({...