Nivo Slider Chỉ trì hoãn hình ảnh đầu tiên

Question

CÔNG TRÌNH NÓ !!! http://jsfiddle.net/jupago/W6CkP/

Dựa trên chủ đề này: Pause Nivo Slider

tôi đã có thể hình dung làm cho nó dừng lại trên hình ảnh đầu tiên.

Đây là mã của tôi. Tôi dừng hoạt hình hai lần vì tôi muốn nó cũng dừng lại sau khi kết thúc chiếu:

$(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); 
}); 

---

gốc bài ở đây:

Tôi đang sử dụng plugin NIVO trượt và trong khi tôi đã nhận nó để hoạt động trơn tru, tôi cần hình ảnh đầu tiên kéo dài hơn phần còn lại (hình ảnh đầu tiên có văn bản trong đó).

Tôi đã tạo một fiddle làm việc ở đây: jsfiddle.net/jupago/W6CkP

rằng nên làm cho nó dễ dàng hơn nhiều để hiểu vấn đề này. tôi vẫn gắn mã html từ fiddle trước để tham khảo:

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

Bạn có thể thử một cái gì đó như thế này:

$(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: Tôi không biết liệu settimeout thực sự cần thiết, có thể chỉ return false sẽ làm điều đó.

$(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

tôi đã không cố gắng này, vì vậy tôi không thể đảm bảo rằng nó sẽ làm việc, nhưng một trong những điều mà bạn có thể thử là thực sự thiết lập các pauseTime đến một chức năng thay vì một hằng số, 5000. Bạn sẽ xác định hình ảnh bạn đang xem, sau đó, nếu đó là hình ảnh mong muốn, bạn sẽ đặt thời gian cho một cái gì đó như 8000, nếu không bạn sẽ đặt nó thành 5000.

Chỉ cần nhắc lại: Tôi chưa thử nghiệm điều này, cũng như tôi có thể đảm bảo rằng nó sẽ hoạt động. Tuy nhiên, nếu có, nó sẽ cung cấp cho bạn một số lượng đáng kể tính linh hoạt bổ sung.

Dưới đây là đoạn code mà bạn sẽ sử dụng nếu bạn muốn cố gắng thực hiện điều này:

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

Ngoài ra, nếu điều này không làm việc trong pauseTime, sau đó tôi sẽ cố gắng đưa gần như nhau điều vào Othe beforeChange tùy chọn, như vậy:

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

LƯU Ý QUAN TRỌNG: Bạn thực sự nên thay thế các ....currentSlide == 0) trong các mẫu ở trên với accessor cho tùy chọn startSlide của Nivo Slider, đặc biệt nếu bạn có kế hoạch thay đổi chỉ số bắt đầu của thanh trượt.Tôi không nhớ những gì các accessor là, nhưng tôi sẽ chụp ảnh rằng nó sẽ giống như thế:

....currentSlide == settings.startSlide) 

nơi settings là tên của các thiết lập biến mà NIVO sử dụng.

CẬP NHẬT

Dựa trên các lỗi mà bạn đề cập trong ý kiến ​​của bạn, đề nghị tiếp theo của tôi là bạn nên thử cùng hai giải pháp một lần nữa, nhưng lần này thay thế các setting.startSlide với 0. Nếu điều đó không hoạt động (mặc dù nó nên), sau đó chúng ta cần phải quay trở lại bảng vẽ. Nếu nó hoạt động, hãy thử thay thế 0 bằng this.startSlide. Hãy cho tôi biết cách làm việc này.

Answer 3

Tôi đã làm điều này và hoạt động tốt:

Trong bạn thay đổi trang HTML:

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

bởi

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