title: jQuery image slider with jump to slide
body: <p>I am trying to create a content slider same as <a href="http://www.net-a-porter.com/magazine/297/contents" rel="nofollow">here</a> the only thing is that they have text and images and i want only images.</p>
  
  <p>Basically on first page it shows thumbnails so when you click any of them it jumps to that particular slide.</p>
  
  <p>I have tried and setup the slider with swiper jquery plugin but i couldn't make it to jump to specific slide here is my code:</p>
  
  <pre><code>    &lt;div class="swiper-container"&gt;
      &lt;div class="swiper-wrapper"&gt;
      &lt;div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)"&gt;
          &lt;div class="block"&gt;
              &lt;a href="#page6"&gt;Jumo to page 1&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="block"&gt;
              &lt;a href="#page2"&gt;Jumo to page 2&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="block"&gt;
              &lt;a href="#page3"&gt;Jumo to page 3&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="page2" data-page-number="2"  class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)"&gt;&lt;/div&gt;
      &lt;div id="page3" data-page-number="3"  class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"&gt;&lt;/div&gt;
      &lt;div id="page4" data-page-number="4"  class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"&gt;&lt;/div&gt;
      &lt;div id="page5" data-page-number="5" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"&gt;&lt;/div&gt;
      &lt;div id="page6" data-page-number="6" class="swiper-slide"&gt;&lt;h1&gt;THIS IS PAGE 6&lt;/h1&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="swiper-pagination swiper-pagination-white"&gt;&lt;/div&gt;
  
      &lt;div class="swiper-button-next swiper-button-white"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-prev swiper-button-white"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      spaceBetween: 30,
      effect: 'fade'
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Jsfiddle here <a href="https://jsfiddle.net/yuv72u60/" rel="nofollow">https://jsfiddle.net/yuv72u60/</a></p>
  
  <p>Seeking help!</p>
  
  <p>Thank you</p>