使用jquery或javascript將幻燈片功能添加到圖庫

Question

我想實現的是一個切換按鈕，它將觸發自動幻燈片。就像播放/暫停按鈕一樣。

我使用的圖片庫從html5up.net模板是在這裏：

https://html5up.net/lens

下一個圖像當前觸發上點擊有：

<div class="nav-next"></div> 

在HTML中的畫廊如此出現，然後單擊拇指將激活相應的圖像。

<section id="thumbnails"> 
<article> 
<a class="thumbnail" href="images/fulls/114.png"> 
<img src="images/thumbs/114.jpg"/></a> 
</article> 

<article> 
<a class="thumbnail" href="images/fulls/116.png"> 
<img src="images/thumbs/116.jpg"/></a> 
</article> 

<article> 
<a class="thumbnail" href="images/fulls/168.png"> 
<img src="images/thumbs/168.jpg"/></a> 
</article> 
</section> 

我想嘗試的變化這樣：

function slideSwitch() { 
    var $active = $('.thumbnail'); 
    var $next = $active.next();  

    $next.addClass('active'); 

    $active.removeClass('active'); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 

但是隻取得了無奈在這一點上，我不知道我錯過了什麼。

這裏的畫廊中一個最小的版本，如果你想嘗試：

https://codepen.io/anon/pen/VWwVqd

Answer 1

我設法弄清楚幻燈片功能，像這樣：

$(function(){ 
     setInterval(function() { 
      $('.nav-next').trigger('click'); 
     }, 7000); 

}); 

Answer 2

你已經包含了jQuery插件在你的頁面的頭？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>