title: Jquery custom photo slideshow displaying all images simultaneously instead of one then the next
body: <p>I followed a tutorial on youtube to make a photo ...reel? ( <a href="https://www.youtube.com/watch?v=yikHrIMsccw" rel="nofollow">https://www.youtube.com/watch?v=yikHrIMsccw</a> )and cannot for the life of me figure out why my photos are displaying the same as before I did the code. They are supposed to fade in and out every 3 seconds in a loop. I have 8 photos which shouldn't matter to my knowledge and understanding of the written code.</p>
  
  <pre><code>    function Slider() {
  $(".photoSlider#1").show("fade", 300);
  $(".photoSlider#1").delay(3000).hide("slide", { direction: 'left' }, 300);
  
  var sliderCount = $(".slider img").size();
  var count = 2;
  
  setInterval(function () {
      $(".photoSlider#" + count).show("slide", { direction: 'right' }, 300);
      $(".photoSlider#" + count).delay(3000).hide("slide", { direction: 'left' }, 300);
  
      if (count &gt;= sliderCount) {
          count = 1;
      } else {
          count = count + 1;
      }//end if/else statement
  }, 3600);//end setinterval
  }//end function slider
  </code></pre>
  
  <p>here is my javascript, jqueryui and jquery library api's from google are in my head tag. </p>
  
  <pre><code>    &lt;div class="photoSlider"&gt;
                      &lt;img id="1" src="~/Content/Photos/photo1.jpg" /&gt;
                      &lt;img id="2" src="~/Content/Photos/photo2.jpg" /&gt;
                      &lt;img id="3" src="~/Content/Photos/photo3.jpg" /&gt;
                      &lt;img id="4" src="~/Content/Photos/photo4.jpg" /&gt;
                      &lt;img id="5" src="~/Content/Photos/photo5.jpg" /&gt;
                      &lt;img id="6" src="~/Content/Photos/photo6.jpg" /&gt;
                      &lt;img id="7" src="~/Content/Photos/photo7.jpg" /&gt;
                      &lt;img id="8" src="~/Content/Photos/photo8.jpg" /&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>here is my html for the slider</p>
  
  <pre><code>    .photoSlider{
          width:600px; overflow:hidden;margin:30px auto;
          background-image:url(~/Content/Photos/loading.gif);
          background-repeat:no-repeat;
          background-position:center;
      }
  
  
      .photoSlider img {
          width:600px;
          display:none;
      }
  </code></pre>
  
  <p>and this is the css I have applied to the html. With the </p>
  
  <pre><code>    display:none; 
  </code></pre>
  
  <p>it doesn't show the pictures at all, which it's supposed to do, but the javascript should fade them in right? Also according to the tutorial the background image (just a circle.gif that spins) should show behind the pictures, but when they don't show, neither does it.</p>