title: Slider banner with JavaScript
body: <p>Can someone explain to me how to make an image slider with JavaScript only (not jQuery)?</p>
  
  <p>I have found many questions addressing this issue, but have had difficulty understanding the answers and haven't been able to make the solutions work.  I have sliders in my project, but they are not animated.  Instead, they are an image that changes every three seconds.  I would like the images to slide to the left every three seconds.  Can anyone provide some suggestions on how to achieve this?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="eight columns all"&gt;
      &lt;img id="img-slide"&gt;
      &lt;!--&lt;p&gt;&gt;&gt;&lt;/p&gt; --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#img-slide{
      margin:15px;
      height: 95%;
      width:95%;
      border-radius:5px;
  }
  </code></pre>
  
  <p>And the functions in JS:</p>
  
  <pre><code>function slide1(){
      document.getElementById('img-slide').src="img/slide_1.jpg";
      setTimeout("slide2()", 2500);
  }
  
  function slide2(){
      document.getElementById('img-slide').src="img/slide_2.jpg";
      setTimeout("slide3()", 3000);
  }
  
  function slide3(){
      document.getElementById('img-slide').src="img/slide_3.jpg";
      setTimeout("slide1()", 3000);
  }
  </code></pre>
  
  <p>Thanks.</p>