JS скрипт - оператор if игнорирует код jQuery

Question

Я пытаюсь создать свой собственный слайдер для веб-страницы, потому что я не хочу использовать Bootstrap. Однако теперь у меня возникает проблема с оператором if, игнорирующим мою анимацию jQuery.

// SLIDER

$(".dot").click(function(){
  let currentId = ($(".dot-active").attr("id")[$(".dot-active").attr("id").length - 1]);
  let nextId = event.target.id[(event.target.id).length - 1];

  $(".dot-active").removeClass("dot-active");
  $("#" + event.target.id).addClass("dot-active");

  if(Number(currentId) < Number(nextId)){
    $("#slide" + currentId).hide("slide", { direction: "left" }, 350);
  } else {
    $("#slide" + currentId).hide("slide", { direction: "right" }, 350);
  };
  $("#slide" + currentId).addClass("slide-inactive");
  $("#slide" + currentId).removeClass("slide-active");

  if(Number(currentId) < Number(nextId)){
    $("#slide" + currentId).hide("slide", { direction: "right" }, 350);
  } else {
    $("#slide" + currentId).hide("slide", { direction: "left" }, 350);
  };
  $("#slide" + nextId).removeClass("slide-inactive");
  $("#slide" + nextId).addClass("slide-active");
});

Я попытался поместить оповещения в оператор if, и это сработало, поэтому он просто не распознает строку кода jQuery. вероятно. Кроме того, без оператора if анимация работает хорошо. Кто-нибудь знает почему, пожалуйста?

Еще один дополнительный вопрос: когда я запускаю этот код без оператора if (только с одним направлением скольжения) для события первого щелчка, первая анимация не работает, после этогокаждая анимация работает правильно, кто-нибудь знает почему?

Спасибо

Answer 1

У меня там были ошибки, мой плохой. Исправлено здесь

// SLIDER

$(".dot").click(function(){
  let currentId = ($(".dot-active").attr("id")[$(".dot-active").attr("id").length - 1]);
  let nextId = event.target.id[(event.target.id).length - 1];

  $(".dot-active").removeClass("dot-active");
  $("#" + event.target.id).addClass("dot-active");

  if(Number(currentId) < Number(nextId)){
  $("#slide" + currentId).hide("slide", { direction: "left" }, 350);
  } else {
    $("#slide" + currentId).hide("slide", { direction: "right" }, 350);
  };
  $("#slide" + currentId).addClass("slide-inactive");
  $("#slide" + currentId).removeClass("slide-active");

  if(Number(currentId) < Number(nextId)){
  $("#slide" + nextId).show("slide", { direction: "right" }, 350);
  } else {
    $("#slide" + nextId).show("slide", { direction: "left" }, 350);
  };
  $("#slide" + nextId).removeClass("slide-inactive");
  $("#slide" + nextId).addClass("slide-active");
});