title: Image slide gallery with jquery, how to do this?
body: <p>I'm trying to make a slider with jQuery and actually I do not know what's causing the error.</p>
  <p>I'm pretty new at this language and I'm learning so yeah, my code might look stupid :D</p>
  <p>Alright, so basically I have five images: 1, 2, 3, 4 and 5, and below is my code:</p>
  <p>HTML:</p>
  <pre><code>&lt;html&gt;
  ...
  &lt;section id=&quot;image_slider&quot;&gt;
      &lt;div id=&quot;trapezoid&quot;&gt;&lt;/div&gt; &lt;!-- I'll explain that div below :P --&gt;
      
      &lt;img class=&quot;image&quot; id=&quot;img1&quot; src=&quot;1.png&quot; alt=&quot;1&quot;&gt;&lt;/img&gt;
      &lt;img class=&quot;image&quot; id=&quot;img2&quot; src=&quot;2.png&quot; alt=&quot;2&quot;&gt;&lt;/img&gt;
      &lt;img class=&quot;image&quot; id=&quot;img3&quot; src=&quot;3.png&quot; alt=&quot;3&quot;&gt;&lt;/img&gt;
      &lt;img class=&quot;image&quot; id=&quot;img4&quot; src=&quot;4.png&quot; alt=&quot;4&quot;&gt;&lt;/img&gt;
      &lt;img class=&quot;image&quot; id=&quot;img5&quot; src=&quot;5.png&quot; alt=&quot;5&quot;&gt;&lt;/img&gt;
      
      
      
   &lt;/section&gt;
  ...
  &lt;/html&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>&lt;CSS&gt;
  #image_slider {
      height:500px;
      
      /*
      background-image: url(&quot;1.png&quot;);
      background-image: url(&quot;2.png&quot;);
      background-image: url(&quot;3.png&quot;);
      background-image: url(&quot;4.png&quot;);
      background-image: url(&quot;5.png&quot;);
      */
  }
  
  /* 
  #trapezoid
  {
      border-bottom: 500px solid #555;
      border-left: 0px solid transparent;
      border-right: 125px solid transparent;  
      height: 0;
      width: 500px;
      position:absolute;
  }
  */
     
  .image {
      vertical-align:top;
      position:absolute;
  }
  &lt;/CSS&gt;
  </code></pre>
  <p>JAVASCRIPT:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  var i=0;
  setTimeout(function(){
  i++;
  if(i=0)
  {
  $(&quot;.image&quot;).not(&quot;img1&quot;).hide();
  }
  else if(i=1)
  {
  $(&quot;.image&quot;).not(&quot;img2&quot;).hide();
  }
  else if(i=2)
  {
  $(&quot;.image&quot;).not(&quot;img3&quot;).hide();
  }
  else if(i=3)
  {
  $(&quot;.image&quot;).not(&quot;img4&quot;).hide();
  }
  else if(i=4)
  {
  $(&quot;.image&quot;).not(&quot;img5&quot;).hide();
  }
  else if(i=5)
  
  {
  i=-1;
  }
  }2000);
  });
    &lt;/script&gt;
  </code></pre>
  <p>Alright, so from the beginning: I'm considering two ways how I want slider to look like.</p>
  <p>The first and original one, in that case I wanted to make a slider in which images will move from right to left, also i wanted to have a trapezoidal shape over this slider that's why there's a div with id=&quot;trapezoidal&quot;, but it seemed impossible to do when I had  images implemented in html document because images didn't wanted to permit this trapezoid to be over them all, when I implemented those images as background images in stylesheet, it kinda worked yes, but for me it was impossible to animate 5 background images so it would look nice.</p>
  <p>So finally, please help me with jQuery code, to make that slider work in this way: every 5 seconds images are changing by sliding to the left. The old one is disappearing by moving to the left and the new one is appearing by moving to the left. (The new one shall be &quot;behind&quot; the old one).</p>
  <p>Also please explain why my jQuery code isn't working, I mean I know there are loops in jQuery like while, for etc but they didn't work either, I do not know why the loop is not repeating every 2s...</p>