title: Add texts and links to fade slider
body: <p>I'd like to add some text for each image (which fades with it), and make the whole image areas clickable links.</p>
  
  <p>Here is the code:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="slides"&gt;    
      &lt;img src="..."&gt;
      &lt;img src="..."&gt;
      &lt;img src="..."&gt;
      &lt;img src="..."&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.slides {
  overflow:hidden;
  top:0;
  position:relative;
  width:100%;
  height:206px;
  z-index:920;
  border-bottom:white 6px solid;
  }
  
  .slides img {
  position:absolute;
  left:0;
  top:0;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
  $('.slides img:gt(0)').hide();
  
  setInterval(function () {
      $('.slides :first-child').fadeOut(2000)
                               .next('img')
                               .fadeIn(2000)
                               .end()
                               .appendTo('.slides');
  }, 6000); // 6 seconds
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>(BTW I use jquery code though I don't understand it yet.)</p>