Кнопка галереи изображений не исчезает, и изображение исчезает

Question

В галерее ниже все работает хорошо, кроме нажатия на предыдущую кнопку.Первое изображение исчезает, а кнопка не исчезает!

Демо: https://jsfiddle.net/ub56gs8y/2/

  function checkIimg() {
    if ($(".sample:first").hasClass("img-active")) {
      $(".b1").fadeOut(100);
    } else {
      $(".b1").fadeIn(100);
    }

    if ($(".sample:last").hasClass("img-active")) {
      $(".b2").fadeOut(100);
    } else {
      $(".b2").fadeIn(100);
    }
  }

  checkIimg();

  $(".buttons button").click(function() {
    if ($(this).hasClass("b2")) {
      $(".sample.img-active").fadeOut(100, function() {
        $(this).removeClass("img-active").next(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    } else {
      $(".sample.img-active").fadeOut(100, function() {
        $(this).removeClass("img-active").prev(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    }
  });

.img-hidden {
  display: none;
}

button {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
       <div class="col-12 gallery-images">
         <img src="https://placeimg.com/100/100/any" class="sample img-active" />
         <img src="https://placeimg.com/100/100/nature" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/arch" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/animals" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/people" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/tech" class="sample img-hidden" />
       </div>

       <div class="buttons">
         <button class="b1">previous</button>
         <button class="b2">Next</button>

       </div>
     </div>

  $(".buttons button").click(function() {
    if ($(this).hasClass("b2")) {
      $(".sample.img-active").fadeOut(100, function() {
        $(this).removeClass("img-active").next(".img-hidden").addClass("img-active").fadeIn(100);
    checkIimg();
      });
    } else {
      $(".sample.img-active").fadeOut(100, function() {
        $(this).removeClass("img-active").prev(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    }
  });

Answer 1

Вы забыли добавить класс img-hidden к скрытым изображениям.

Добавьте его после выбора элемента перед исчезновением:

$(".sample.img-active").addClass("img-hidden").fadeOut(...

Полный пример:

function checkIimg() {
    if ($(".sample:first").hasClass("img-active")) {
      $(".b1").fadeOut(100);
    } else {
      $(".b1").fadeIn(100);
    }

    if ($(".sample:last").hasClass("img-active")) {
      $(".b2").fadeOut(100);
    } else {
      $(".b2").fadeIn(100);
    }
  }

  checkIimg();

  $(".buttons button").click(function() {
    if ($(this).hasClass("b2")) {
      $(".sample.img-active").addClass("img-hidden").fadeOut(100, function() {
        $(this).removeClass("img-active").next(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    } else {
      $(".sample.img-active").addClass("img-hidden").fadeOut(100, function() {
        $(this).removeClass("img-active").prev(".img-hidden").addClass("img-active").fadeIn(100);
        checkIimg();
      });
    }
  });

.img-hidden {
  display: none;
}

button {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
       <div class="col-12 gallery-images">
         <img src="https://placeimg.com/100/100/any" class="sample img-active" />
         <img src="https://placeimg.com/100/100/nature" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/arch" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/animals" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/people" class="sample img-hidden" />
         <img src="https://placeimg.com/100/100/tech" class="sample img-hidden" />
       </div>

       <div class="buttons">
         <button class="b1">previous</button>
         <button class="b2">Next</button>

       </div>
     </div>