Displaying 4th slide in javascript slideshow

I have been working on a javascript program that uses a slideshow to show different elements. As of right now, my program correctly displays 3 slides correctly but does not display the fourth one. I am still stumped as to why it is doing this.

Here is the code:

$(function() {
  var points = 5;
  points++;
  $("#draggable").draggable();


  $("#droppable").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this)
        .addClass("second_class")
        .find("p")
        .html(alert(points--));
    }
  });
  $("#droppable2").droppable({
    tolerance: 'pointer',
    greedy: false,
    drop: function(event, ui) {
      $(this)

      .find("p")

      .html(alert(points++));

    },

    over: function(event, ui) {
      $("#droppable").droppable("disable")

    },
    over: function(event, ui) {
      $("#droppable").droppable("enable")

    }


  });
});
$(function() {
  var points = 5;
  points++;
  $("#draggable2").draggable();


  $("#droppable3").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this)
        .addClass("second_class")
        .find("p")
        .html(alert(points--));
    }
  });
  $("#droppable4").droppable({
    tolerance: 'pointer',
    greedy: false,
    drop: function(event, ui) {
      $(this)

      .find("p")

      .html(alert(points++));

    },

    over: function(event, ui) {
      $("#droppable3").droppable("disable")

    },
    over: function(event, ui) {
      $("#droppable3").droppable("enable")

    }


  });
});
$(function() {
  var points = 5;
  points++;
  $("#draggable5").draggable();


  $("#droppable6").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this)
        .addClass("second_class")
        .find("p")
        .html(alert(points--));
    }
  });
  $("#droppable6").droppable({
    tolerance: 'pointer',
    greedy: false,
    drop: function(event, ui) {
      $(this)

      .find("p")

      .html(alert(points++));

    },

    over: function(event, ui) {
      $("#droppable5").droppable("disable")

    },
    over: function(event, ui) {
      $("#droppable5").droppable("enable")

    }


  });
});

$("#open_popup").click(function() {
  $("#popup").css("display", "block");
  
});

$("#close_popup").click(function() {
  $("#popup").css("display", "none");
});
$("#open_popup2").click(function() {
  $("#popup2").css("display", "block");
  
});

$("#close_popup2").click(function() {
  $("#popup2").css("display", "none");
});
$("#open_popup3").click(function() {
  $("#popup2").css("display", "block");
  
});

$("#close_popup3").click(function() {
  $("#popup2").css("display", "none");
});

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }


  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 10 seconds
}

var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow() {
  pauseButton.innerHTML = 'Play';
  playing = false;
  clearInterval(slideIndex);
}

function playSlideshow() {
  pauseButton.innerHTML = 'Pause';
  playing = true;

  setTimeout(showSlides, 3000);
}

 

JSFiddle