Удалить элемент в конце карусели

Question

Я создал простую карусель в jQuery, которая проходит через слайды X один раз, нажав кнопку «Далее». Однако, эта кнопка должна исчезнуть на последнем слайде, но я не могу заставить ее работать.

JSFiddle из того, что у меня есть в данный момент: https://jsfiddle.net/nvwmfe4t/

Кнопкаисчезает в какой-то момент, но только при нажатии «Далее» на последнем слайде еще раз.

Код:

var carousel = $("#wrap"),
                  slideWidth = 500,
                  nextBtn = $("#next"),
                  count = $("#wrap .section").length;

                $(nextBtn).click(function() {

                  var currentMargin = Math.abs(parseInt($(carousel).css('marginLeft'))),
                    maxMargin = slideWidth * count - slideWidth,
                    finalMargin = slideWidth * count - slideWidth;

                  $(this).css({
                    'pointer-events': 'none',
                    'opacity': '.5'
                  });
                  setTimeout(function() {
                    $(nextBtn).css({
                      'pointer-events': 'all',
                      'opacity': '1'
                    });
                  }, 500);

                  if (currentMargin + 100 <= maxMargin) {
                    $(carousel).css('margin-left', '-=' + slideWidth);
                  } else if (currentMargin == finalMargin) {
                    $(nextBtn).hide();
                  } else {
                    $(carousel).css('margin-left', '-=0');
                  }
                });

.window {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 500px;
  overflow: hidden;
}

#wrap {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 5000px;
  transition: all .5s;
}

.section {
  width: 500px;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0;
  color: white
}

#next {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  background-color: black;
  text-align: center;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="window">
  <div id="wrap">
    <div class="section" style="background-color: red;">
      1
    </div>
    <div class="section" style="background-color: orange;">
      2
    </div>
    <div class="section" style="background-color: yellow;">
      3
    </div>
    <div class="section" style="background-color: green;">
      4
    </div>
    <div class="section" style="background-color: blue;">
      5
    </div>
    <div class="section" style="background-color: purple;">
      6 - Button should be gone on this slide but instead only disappears on one more click
    </div>
  </div>
</div>
<span id="next">Next</span>

Answer 1

Это в основном потому, что в момент перехода к последнему слайду оператор if для currentMargin + 100 <= maxMargin по-прежнему верен, и поэтому оператор else, отвечающий за скрытие кнопки, работать не будет. Вам придется переместить условие currentMargin == finalMargin с else if на if. Также кажется, что для корректной работы необходимо изменить его на currentMargin == finalMargin - 500.

                var carousel = $("#wrap"),
                  slideWidth = 500,
                  nextBtn = $("#next"),
                  count = $("#wrap .section").length;

                $(nextBtn).click(function() {

                  var currentMargin = Math.abs(parseInt($(carousel).css('marginLeft'))),
                    maxMargin = slideWidth * count - slideWidth,
                    finalMargin = slideWidth * count - slideWidth;

                  $(this).css({
                    'pointer-events': 'none',
                    'opacity': '.5'
                  });
                  setTimeout(function() {
                    $(nextBtn).css({
                      'pointer-events': 'all',
                      'opacity': '1'
                    });
                  }, 500);

                  if (currentMargin + 100 <= maxMargin) {
                    $(carousel).css('margin-left', '-=' + slideWidth);
                  } else {
                    $(carousel).css('margin-left', '-=0');
                  }
                  if (currentMargin == finalMargin - 500) {
                    $(nextBtn).hide();
                  } 
                });

.window {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 500px;
  overflow: hidden;
}

#wrap {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 5000px;
  transition: all .5s;
}

.section {
  width: 500px;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0;
  color: white
}

#next {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  background-color: black;
  text-align: center;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="window">
  <div id="wrap">
    <div class="section" style="background-color: red;">
      1
    </div>
    <div class="section" style="background-color: orange;">
      2
    </div>
    <div class="section" style="background-color: yellow;">
      3
    </div>
    <div class="section" style="background-color: green;">
      4
    </div>
    <div class="section" style="background-color: blue;">
      5
    </div>
    <div class="section" style="background-color: purple;">
      6 - Button should be gone on this slide but instead only disappears on one more click
    </div>
  </div>
</div>
<span id="next">Next</span>