title: How could I automate a JavaScript function to autoplay a slideshow?
body: <p>I have a div box gallery with some pictures on background and 2 lateral buttons <code>prev</code> and <code>next</code>. On click of a button the JavaScript show the next or previous picture, that's ok but I wish also to make this transition automatic using an interval time to show the next picture. How can I proceed? 
  This is my HTML:</p>
  
  <pre><code>&lt;div id="boxgallery" class="boxgallery" data-effect="effect-1"&gt;
      &lt;div class="panel"&gt;&lt;img src="img/1.jpg" alt="Image 1"/&gt;&lt;/div&gt;
      &lt;div class="panel"&gt;&lt;img src="img/2.jpg" alt="Image 2"/&gt;&lt;/div&gt;
      &lt;div class="panel"&gt;&lt;img src="img/3.jpg" alt="Image 3"/&gt;&lt;/div&gt;
      &lt;div class="panel"&gt;&lt;img src="img/4.jpg" alt="Image 4"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my JavaScript function:</p>
  
  <pre><code>// goto next or previous slide
  BoxesFx.prototype._navigate = function( dir ) {
      if( this.isAnimating ) return false;
      this.isAnimating = true;
  
      var self = this, currentPanel = this.panels[ this.current ];
  
      if( dir === 'next' ) {
          this.current = this.current &lt; this.panelsCount - 1 ? this.current + 1 : 0;          
      }
      else {
          this.current = this.current &gt; 0 ? this.current - 1 : this.panelsCount - 1;
      }
  
      // next panel to be shown
      var nextPanel = this.panels[ this.current ];
      // add class active to the next panel to trigger its animation
      classie.add( nextPanel, 'active' );
      // apply the transforms to the current panel
      this._applyTransforms( currentPanel, dir );
  
      // let´s track the number of transitions ended per panel
      var cntTransTotal = 0,
  
          // transition end event function
          onEndTransitionFn = function( ev ) {
              if( ev &amp;&amp; !classie.has( ev.target, 'bg-img' ) ) return false;
  
              // return if not all panel transitions ended
              ++cntTransTotal;
              if( cntTransTotal &lt; self.panelsCount ) return false;
  
              if( support.transitions ) {
                  this.removeEventListener( transEndEventName, onEndTransitionFn );
              }
  
              // remove current class from current panel and add it to the next one
              classie.remove( currentPanel, 'current' );
              classie.add( nextPanel, 'current' );
              // reset transforms for the currentPanel
              self._resetTransforms( currentPanel );
              // remove class active
              classie.remove( nextPanel, 'active' );
              self.isAnimating = false;
          };
  
      if( support.transitions ) {
          currentPanel.addEventListener( transEndEventName, onEndTransitionFn );
      }
      else {
          onEndTransitionFn();
      }
  }
  </code></pre>