title: How do I make a Pause/Play cycle button on an image slider using jQuery and make the image fade in and out smoothly and without flashing?
body: <p>Im still very new to javascript and finding it a little hard to get my head around it.</p>
  
  <p>I would like the pause/play button to be one button and cycle through when it has been clicked on. </p>
  
  <p>I was also wondering how to make the image transition more smoother with the fade in and out? I've tried changing the seconds in the fadeIn and fadeOut but it doesn't seem to make much difference, so I am a little lost on what to do now. Also how do I make the image stop doing the flash in between transitions?</p>
  
  <p>Thanks, Gabi.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="wrapper"&gt;
  &lt;div id="slider"&gt;
  &lt;img id="1" src="images/kirsty_family01.jpg"&gt;
  &lt;img id="2" src="images/kirsty_family02.jpg"&gt;
  &lt;img id="3" src="images/kirsty_family03.jpg"&gt;
  &lt;img id="4" src="images/kirsty_family04.jpg"&gt;
  &lt;img id="5" src="images/kirsty_family05.jpg"&gt;
  &lt;img id="6" src="images/kirsty_family06.jpg"&gt;
  &lt;/div&gt;
  &lt;a href="#" class="left" onClick="prev();return false;"&gt;Previous&lt;/a&gt;
  &lt;a href="#" class="right" onClick="next();return false;"&gt;Next&lt;/a&gt;
  &lt;a href="#" class="right" onClick="stop();return false;"&gt;Pause&lt;/a&gt;
  &lt;a href="#" class="right" onClick="play();return false;"&gt;Play&lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>sliderInt=1;
  sliderNext=2;
  
  $(document).ready(function(){
  $("#slider&gt;img#1").fadeIn(1000);
  startSlider();
  });
  
  function startSlider(){
  count = $("#slider&gt;img").size();
  
  loop = setInterval(function(){
  
      if(sliderNext&gt;count){
          sliderNext=1;
          sliderInt=1;
          }
  
      $("#slider&gt;img").fadeOut(1000);
      $("#slider&gt;img#"+sliderNext).fadeIn(1000, function() {
      $(this).siblings().hide();
  });
  
  
      sliderInt=sliderNext;
      sliderNext=sliderNext+1;
  
      },3000)
  }
  
  
  function prev(){
  newSlide=sliderInt-1;
  showSlide(newSlide);
  }
  
  function next(){
  newSlide=sliderInt+1;
  showSlide(newSlide);
  }
  
  function stop(){
      window.clearInterval(loop);
  }
  
  function play(){
  newSlide=sliderInt+1;
  showSlide(newSlide);
  }
  
  $('#play_toggle').bind("click",function(){
  if(stop){
      play();
      $(this).html("pause");
      }else{
          video.pause();
      $(this).html("play"); }
  });
  
  
  function stopLoop(){
  window.clearInterval(loop);
  }
  
  
  function showSlide(id){
  stopLoop();
  
  if(id&gt;count){
          id=1;
          } else if(id&lt;1){
              id=count;
              }
  
      $("#slider&gt;img").fadeOut(1000);
      $("#slider&gt;img#"+id).fadeIn(1000);
  
      sliderInt=id;
      sliderNext=id+1;
      startSlider();
  }
  
  $("#slider &gt; img").hover(
       function () {
             stopLoop();
        },
        function() {
             startSlider();
             }
          );
  </code></pre>