jQuery pausing a timer on mouseenter and mouseout not working
<p>I have this auto changing of images which works but tying to add so it pauses on hover and resets when leave element but it continues to scroll through and does not pause. I'm new to JS and jQuery.</p>

<p>JS</p>

<pre><code>var galleryTimer;
var galleryTimeOut = "2500";
  var galleryImage = ".productImage";

  // auto play function to go through images
  function galleryPlay() {
    $(galleryImage).each(function(index) {
      var self = this
      galleryTimer = setTimeout(function() {
        $('.productImage').removeClass('active');
        $(self).addClass('active');
      }, index * galleryTimeOut);
    });
  }

  // pause when hovering main image and zooming image
  function galleryPause() {
    clearTimeout(galleryTimer);
  }

  // next function to move to next image
  function galleryNext() {

  }

  // prev function to move back to prevous image
  function galleryPrev() {

  }

  $(galleryImage).mouseenter(function() {              
    galleryPause();        
  }).mouseleave(function () {     
    galleryPlay();
  });

  $('.galleryNext').on('click', function(event){

  });

  $('.galleryPrev').on('click', function(event){

  });

  // auto start the auto play
  galleryPlay();
</code></pre>

<p>HTML</p>

<pre><code>&lt;ul&gt;
  &lt;li class="productImage active"&gt;
    &lt;a&gt;&lt;img src="http://placehold.it/350x350"&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="productImage"&gt;
    &lt;a&gt;&lt;img src="http://placehold.it/350x350"&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="productImage"&gt;
    &lt;a&gt;&lt;img src="http://placehold.it/350x350"&gt;&lt;/a&gt;
  &lt;/li&gt;
    &lt;li class="productImage"&gt;
    &lt;a&gt;&lt;img src="http://placehold.it/350x350"&gt;&lt;/a&gt;
  &lt;/li&gt;
    &lt;li class="productImage"&gt;
    &lt;a&gt;&lt;img src="http://placehold.it/350x350"&gt;&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;a class="galleryNext"&gt;next&lt;/a&gt;
&lt;a class="galleryPrev"&gt;next&lt;/a&gt;
</code></pre>