Ajouter une fonction de diaporama à la galerie en utilisant Jquery ou javascript

Question

Ce que je voudrais réaliser est un bouton sur bascule qui déclenchera un diaporama automatique. Comme un bouton lecture/pause.

J'utilise une galerie d'images de html5up.net le modèle est ici:

https://html5up.net/lens

L'image suivante est actuellement déclenchée sur un clic avec:

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

Dans le code HTML du la galerie apparaît ainsi, et cliquer sur un pouce activera l'image appropriée.

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

Je suis en train de variations tentatives en tant que telle:

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

    $next.addClass('active'); 

    $active.removeClass('active'); 
} 

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

ont cependant obtenu que la frustration à ce moment que je ne suis pas sûr de ce que je suis absent.

est ici une version minimale de la galerie si vous voulez expérimenter:

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

Answer 1

j'ai réussi à comprendre la fonction diaporama comme ceci:

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

}); 

Answer 2

Avez-vous inclus le plugin jQuery sur la tête de la page?

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