Jqueryまたはjavascriptを使用してギャラリーにスライドショー機能を追加します。

Question

私が達成したいのは、自動スライドショーを開始するトグルボタンです。再生/一時停止ボタンのように。

私はhtml5up.netから画像ギャラリーを使用しているテンプレートはここにある：

https://html5up.net/lens

次の画像が現在クリックでトリガさ：HTML内

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

ギャラリーがそのまま表示され、サムをクリックすると適切な画像が表示されます。

<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>