Pause for loop/slideshow on hover and continue where it left off

Question

I'm fairly new to jQuery and I'm currently working on a slideshow. The slideshow consists of a number of headers that plays automatically and shows an image that belongs to a specific header. The moment you hover over a title as a user, the slideshow stops playing automaticly and you have the control over the view.

The problem I encounter is that sometimes after mouseout(); the slideshow shows the wrong image. I would like the slideshow to continue from where it left off.

I have tried several things including this example: Stop loop on hover Which is basically what I am looking for. Unfortunately I'm not yet skilled enough to apply this myself in jQuery or understand this particular code. I know I have to keep track of the loop in some way...

All help and tips are welcome, thanks!

var autoPlay = 0;

$(function() {
  myCarousel();
  $(".indexTitle").mouseenter(pauseCarousel);
  $(".indexTitle").mouseout(playCarousel);
});

function myCarousel() {
  var x = $(".indexTitle");
  var n = $(".indexImage");

  for (i = 0; i < x.length; i++) {
    $(x[i]).removeClass("redStroke");
    $(n[i]).removeClass("showIndexImage");
  }

  autoPlay++;
  if (autoPlay > x.length && n.length) {
    autoPlay = 1
  }

  $(x[autoPlay - 1]).addClass("redStroke");
  $(n[autoPlay - 1]).addClass("showIndexImage");

  myTimeOut = setTimeout(myCarousel, 2000); // Change image every 2.5 seconds

}

function pauseCarousel() {
  console.log("Enter = Pause");
  clearTimeout(myTimeOut);
  $(".indexTitle").removeClass("redStroke");
  $(".indexTitle").removeClass("showIndexImage");
};

function playCarousel() {
  console.log("Exit = Play");
  setTimeout(myTimeOut);
  myCarousel();
};

My Fiddle: https://jsfiddle.net/L_03k/830adhfp/35/