Callback not actioning after first cycle of divs

Question

I am building a slideshow that is preloading one, whilst display an active slide and 'holding' the previous slide. During the process of clicking the next or previous buttons a callback is made to delay the addClass() method which slowly reveals the text (this will later be animated). Now, it works on the first cycle through the divs but it will not work when you start again at the beginning, or if you decide to move back in the previous direction.

I've hit a wall with my particular knowledge and any input at this time would be appreciated.

$(document).ready(function(){
  $('.slide:eq(-1)').addClass('last');
  $('.slide:first').addClass('active').delay(1500).queue(function(){
    $(this).addClass('show-text');
  });
  $('.slide:eq(1)').addClass('next');
});

function prevSlide() {
  var $prevActive = $('.slide.active');
  var $prevSlide = $('.slide').eq(($prevActive.index() - 1) % $('.slide').length);
  var $afterPrevSlide = $('.slide').eq(($prevActive.index() - 2) % $('.slide').length);
  
  $('.slide').removeClass('last active show-text next');
  
  $prevActive.addClass('next');
  $prevSlide.addClass('active').delay(1500).queue(function(){
    $(this).addClass('show-text');
  });
  $afterPrevSlide.addClass('last');
}

function nextSlide() {
  var $activeSlide = $('.slide.active');
  var $nextSlide = $('.slide').eq(($activeSlide.index() + 1) % $('.slide').length);
  var $slideAfterNext = $('.slide').eq(($activeSlide.index() + 2) % $('.slide').length);
  
  $('.slide').removeClass('last active show-text next');
  
  $activeSlide.addClass('last');
  $nextSlide.addClass('active').delay(1500).queue(function(){
    $(this).addClass('show-text');
  });
  $slideAfterNext.addClass('next');

}

$('#prev').click(function(){
  prevSlide();
});
  
$('#next').click(function(){
  nextSlide();
});

body {
  font-family: sans-serif;
}



.slide-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  overflow: hidden;
}

.slide {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 70%;
  left: 140%;
  z-index: 0;
  transition: 1.25s;
}

.slide h2 {
  display: none;
  color: #fff;
  text-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}

.slide.active.show-text h2 {
  display: block;
  animation: reveal-text 1.75s forwards;
}

@keyframes reveal-text {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#slide1 {
  background-image: url('https://picsum.photos/1250/1600/?random');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#slide2 {
  background-image: url('https://picsum.photos/1200/1600/?random');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#slide3 {
  background-image: url('https://picsum.photos/1200/1500/?random');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#slide4 {
  background-image: url('https://picsum.photos/1300/1600/?random');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide.last {
  left: 0;
  z-index: 0;
}

.slide.active {
  left: 0;
  z-index: 1;
}

.slide.next {
  left: 70%;
  z-index: 2;
}

.button-wrapper {
  display: flex;
  z-index: 10;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.button {
  background-color: rgba(255,255,255,0.85);
  height: 40px;
  border: none;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-wrapper">
  <div id="slide1" class="slide">
    <h2>Slide One.</h2>
  </div>
  <div id="slide2" class="slide">
    <h2>Slide Two.</h2>
  </div>
  <div id="slide3" class="slide">
    <h2>Slide three.</h2>
  </div>
  <div id="slide4" class="slide">
    <h2>Slide Four.</h2>
  </div>
  <div class="button-wrapper">
    <button id="prev" class="button">Prev</button>
    <button id="next" class="button">Next</button>
  </div>
</div>

JSFiddle : https://jsfiddle.net/e4qf7ma1/

Answer 1

You have to .dequeue() events when changing slides. I added $prevActive.dequeue(); and $activeSlide.dequeue(); to your code and it works fine for me.

https://jsfiddle.net/7gLbxhnq/5/