title: iDangerous Swiper, thumbnail control
body: <p>I’m a beginner coder. Does anybody know how to link thumbnail images to the swiper so that clicking a thumbnail moves the swiper-container to the corresponding slide? Thanks for your help!</p>
  
  <p>Example: <a href="http://markdarren.com/F13/test.html" rel="noreferrer">http://markdarren.com/F13/test.html</a></p>
  
  <pre><code>    &lt;div class="swiper-container"&gt;  
      &lt;div class="swiper-wrapper"&gt;
            &lt;div class="swiper-slide"&gt;&lt;img src="images/jacket2.png"&gt;&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;&lt;img src="images/jacket3.png"&gt;&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;&lt;img src="images/jacket4.png"&gt;&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;&lt;img src="images/jacket5.png"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;        
      &lt;div class="thumb"&gt;
        &lt;div&gt;&lt;a href="" title="onClick goto jacket 2"&gt;&lt;img src="images/jacket2.png"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="" title="onClick goto jacket 3"&gt;&lt;img src="images/jacket3.png"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="" title="onClick goto jacket 4"&gt;&lt;img src="images/jacket4.png"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="" title="onClick goto jacket 5"&gt;&lt;img src="images/jacket5.png"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;     
      &lt;script src="js/scroller/js/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/scroller/js/idangerous.swiper-2.0.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      var mySwiper = new Swiper('.swiper-container',{
      pagination: '.pagination',
      paginationClickable: true
      })
      &lt;/script&gt;
  </code></pre>