title: Nivo Slider Delay only the first image
body: <p>IT WORKS!!!
  <a href="http://jsfiddle.net/jupago/W6CkP/" rel="nofollow noreferrer">http://jsfiddle.net/jupago/W6CkP/</a></p>
  
  <p>Based on this thread: <a href="https://stackoverflow.com/questions/8135625/pause-nivo-slider">Pause Nivo Slider</a></p>
  
  <p>I was able to figure make it stop on the first image.</p>
  
  <p><strong>Here's my code. I'm stopping the animation twice because I want it to also stop after slideshow ends:</strong></p>
  
  <pre><code>$(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 &amp; 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);
   });
  </code></pre>
  
  <hr>
  
  <p>Original post here:</p>
  
  <p>I'm using the NIVO slider plugin and while I got it to work smoothly, I need the first image to last longer than the rest (First image has text in it).</p>
  
  <p>I've created a working fiddle here: <a href="http://jsfiddle.net/jupago/W6CkP" rel="nofollow noreferrer">jsfiddle.net/jupago/W6CkP</a></p>
  
  <p>that should make it a lot easier to understand the issue.
  I'm still attaching html code from fiddle before for reference:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="slider-wrapper"&gt;
      &lt;div id="slider" class="nivoSlider"&gt;
  &lt;img src="http://goo.gl/I4c65" /&gt;
  &lt;img src="http://goo.gl/acxBF"/&gt;
  &lt;img src="http://goo.gl/GBzYF"/&gt;
  &lt;img src="http://goo.gl/BC2EA" /&gt;
  &lt;img src="http://goo.gl/9Sd69" /&gt;
  &lt;img src="http://goo.gl/qOaZl"/&gt;
  &lt;img src="http://goo.gl/btswq" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS NIVO:</p>
  
  <pre><code>    $('#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 &amp; 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
  });
  </code></pre>