title: My content slider won't work
body: <p>I have some HTML, CSS and Jquery written but it doesn't work. I just want the slider to fade the image in and the content in and then slide it to the right without the other slides showing.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>        &lt;div class="slider"&gt;
              &lt;div id ="1"&gt;
                  &lt;h2&gt;Greetings!&lt;/h2&gt;
                  &lt;p&gt;Welcome to PowerUp, where imagination becomes a reality.&lt;/p&gt;
                  &lt;img src="../img/HTML5-Guy-BBeanie.png"&gt;
              &lt;/div&gt;
              &lt;div id="2"&gt;
                  &lt;h2&gt;Meet people.&lt;/h2&gt;
                  &lt;p&gt;Work with people who get stuff done.&lt;/p&gt;
                  &lt;img src="../img/HTML5-Guy-BBeanie.png"&gt;
              &lt;/div&gt;
              &lt;div id="3"&gt;
                  &lt;h2&gt;Form teams.&lt;/h2&gt;
                  &lt;p&gt;Create teams of engineers best suited for your needs.&lt;/p&gt;
                  &lt;img src="../img/HTML5-Guy-BBeanie.png"&gt;
              &lt;/div&gt;
              &lt;div id="4"&gt;
                  &lt;h2&gt;Drop by.&lt;/h2&gt;
                  &lt;p&gt;Visit our drop by page and share an idea or a thought, who knows maybe someone will pick up on it.&lt;/p&gt;
                  &lt;img src="../img/HTML5-Guy-BBeanie.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/**********************
  *********SLIDER********
  **********************/
  .slider {
      padding: 1.2% 0 8% 0;
      margin: 0 auto;
      width: 100%;
      height: 460px;
      overflow: hidden;
      background-color: #EFEFEF;
  }
  
  .slider img {
      width: 460px;
      height: 460px;
      display: none;
  }
  
  .slider h2, .slider p {
      display: none;
  }
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>function topSlider() {
  $('.slider #1').show('fade', 500);
  $('.slider #1').delay(5500).hide('slide',{direction: 'left'}, 500);
  
  var sc = $('.slider div').size();
  var count = 2;
  
  setInterval(function() {
      $('.slider #' + count).show('slide', {direction: 'right'}, 500);
      $('.slider #'+ count).delay(5500).hide('slide', {direction: 'left'}, 500);
  
      if (count == sc) {
          count = 1;
      } else {
          count += 1;
      }
  }, 6500);
  </code></pre>
  
  <p>}</p>
  
  <p>Thanks a bunch!</p>