title: How To create thumbnails for a slider using jquery
body: <p>I am trying to create a custom Jquery Slider which have thumbnail navigation. I suceeded in creating the slider. But not with the thumbnail navigation.
  Here is my code</p>
  
  <pre><code>    $(document).ready(function(){
        var i = 0;
  var m_height = $('main').height();
  $('.test_bg').css('height', (function(){
          return m_height + 20;
      }));
  
      var doc_wid = $(document).width();
      if (doc_wid &lt;= 768) {
          $('.test_bg').css('height','auto');
      }
  $('.test_bg').append('&lt;div class="thumbnails"&gt;&lt;/div&gt;');
  $('.thumbnails').append('&lt;ul class="thumbnail_ul container"&gt;&lt;/ul&gt;')
          var slide_array = $('.slide').toArray();
          var total_slide = $(slide_array).length;
          var img_path = "images/main-bg";
  
          var current_slide = slide_array[i];
          for(i=0; i&lt;=total_slide; i++) {
  
              $('.thumbnail_ul').append('&lt;li&gt;&lt;a href="#"&gt;&lt;img alt="slider"&gt;&lt;/a&gt;&lt;/li&gt;');
              $('.thumbnail_ul li a img').attr('src', img_path + i + ".jpg");
          }
  
  
  $('.slide').first().show();
    }
  </code></pre>
  
  <p>And my Html Markup</p>
  
  <pre><code>    &lt;div class="test_bg"&gt;
          &lt;img class="slide active" src="images/main-bg1.jpg"&gt;
          &lt;img class="slide" src="images/main-bg2.jpg"&gt;
          &lt;img class="slide" src="images/main-bg3.jpg"&gt;
          &lt;img class="slide" src="images/main-bg4.jpg"&gt;
          &lt;img class="slide" src="images/main-bg5.jpg"&gt;
          &lt;img class="slide" src="images/main-bg6.jpg"&gt;
          &lt;img class="slide" src="images/main-bg7.jpg"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And Css</p>
  
  <pre><code>    .test_bg { position:absolute; width:100%; height:100%; top:70px; left:0; z-index:-99;}
      .test_bg img { width:100%; height:100%;}
      .slide {display:none;}
      .thumbnails { position:absolute; bottom:0; width:100%; height:100px; float:left;}
      .thumbnail_ul { /*float:left; width:100%;*/ height:100px; padding:0; overflow-x:auto; overflow-y:hidden;}
      .thumbnail_ul li { float:left; list-style:none; height:100px; width:140px; padding:10px; border:3px solid #ffffff; cursor:pointer;}
      .thumbnail_ul li a { text-decoration:none; float:left; width:100%;}
      .thumbnail_ul li a img { float:left; width:100%;}
  </code></pre>
  
  <p>And now what i get in the thumbnail is the last image of array repeated to the total number of slides. please Help</p>