jQuery圖像滑塊跳轉到幻燈片

Question

我想創建一個與here相同的內容滑塊，唯一的是他們有文本和圖像，我只想要圖像。

基本上在第一頁顯示縮略圖，所以當你點擊其中的任何一張時，它會跳轉到特定的幻燈片。

我曾嘗試和設置有刷卡的jQuery插件，但我不能讓它跳到這裏特定的幻燈片滑塊是我的代碼：

<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)"> 
     <div class="block"> 
      <a href="#page6">Jumo to page 1</a> 
     </div> 
     <div class="block"> 
      <a href="#page2">Jumo to page 2</a> 
     </div> 
     <div class="block"> 
      <a href="#page3">Jumo to page 3</a> 
     </div> 
    </div> 
    <div id="page2" data-page-number="2" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)"></div> 
    <div id="page3" data-page-number="3" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div> 
    <div id="page4" data-page-number="4" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div> 
    <div id="page5" data-page-number="5" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div> 
    <div id="page6" data-page-number="6" class="swiper-slide"><h1>THIS IS PAGE 6</h1></div> 
    </div> 

    <div class="swiper-pagination swiper-pagination-white"></div> 

    <div class="swiper-button-next swiper-button-white"></div> 
    <div class="swiper-button-prev swiper-button-white"></div> 
</div> 

<script> 
var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    paginationClickable: '.swiper-pagination', 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 30, 
    effect: 'fade' 
}); 
</script> 

的jsfiddle這裏https://jsfiddle.net/yuv72u60/

尋求幫助！

謝謝

Answer 1

HTML

  <div class="block"> 
       <a href="1">Jumo to page 1</a> 
      </div> 
      <div class="block"> 
       <a href="2">Jumo to page 2</a> 
      </div> 
      <div class="block"> 
       <a href="3">Jumo to page 3</a> 
      </div> 

JS

$(".block a").click(function(){ 

    var index=$(this).attr('href'); 
    swiper.slideTo(index); 
}); 

上面提到的在HTML和你的JS提琴進行了更改部分。 index在上面js是你的頁面的位置。

DEMO

沒有爲您的要求我稍微更新您的小提琴爲API工作