Remove element at end of carousel

Question

I have created a simple carousel in jQuery that runs through X slides once by clicking a "Next" button. However, this button needs to disappear on the last slide, but I can't seem to get this to work.

JSFiddle of what I have at the moment: https://jsfiddle.net/nvwmfe4t/

The button does disappear at some point, but only when you click "Next" on the final slide one more time.

Code:

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

It's basicly because at the moment of getting to the last slide the if statement of currentMargin + 100 <= maxMargin is still true and so the else statement which is responsible for hiding button won't work. You will have to move the currentMargin == finalMargin condition from else if to just if. Also it seems it's required to change it to currentMargin == finalMargin - 500 for it to work corrrectly.

                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>