title: Making a quote roller with buttons and timer
body: <p>We're trying to make a quote roller with buttons and a timer. We have gotten pretty far, but at this point the buttons won't work correctly here's a jsfiddle: <a href="http://jsfiddle.net/BaXXg/1/" rel="nofollow">http://jsfiddle.net/BaXXg/1/</a></p>
  
  <p>and here are the codes</p>
  
  <pre><code>var quotes = [
      "Quote1&lt;br&gt;&lt;br&gt;  -  Repomeri",
      "Quote2 &lt;br&gt;&lt;br&gt; - Emmi",
      "Quote3&lt;br&gt;&lt;br&gt; - Taateli",
      "Quote4&lt;br&gt;&lt;br&gt; - Joonas",
      "Quote5&lt;br&gt;&lt;br&gt; - Eskelinen",
  ];
  
  var i = 0;
  var timer = null;
  
  setInterval(function() {
      $("#slideContainer").html(quotes[i]);
      if (i == quotes.length) {
          i = 0;
      } else {
          i++;
      }
  }, 4 * 1000);
  
  
  var b1 = document.getElementById('b1'),
      b2 = document.getElementById('b2'),
      b3 = document.getElementById('b3'),
      b4 = document.getElementById('b4'),
      b5 = document.getElementById('b5');
  
  
  b1.onclick = function() {
      $("#slideContainer").html(quotes[i]);
      i = 0;
  };
  
  b2.onclick = function() {
      $("#slideContainer").html(quotes[i]);
      i = 1;
  };
  
  b3.onclick = function() {
      $("#slideContainer").html(quotes[i]);
      i = 2;
  };
  
  b4.onclick = function() {
      $("#slideContainer").html(quotes[i]);
      i = 3;
  };
  
  b5.onclick = function() {
      $("#slideContainer").html(quotes[i]);
      i = 4;
  };
  </code></pre>