JS / jQuery - первый щелчок игнорирует первую анимацию, каждый второй щелчок работает правильно

Question

Я создал этот слайдер, но когда я запускаю его на странице, первый щелчок не запускает первую анимацию. Он запускает вторую анимацию и каждый второй щелчок после этого запускает обе анимации должным образом. Чего мне не хватает с первым кликом?

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


    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");
  };
});

сделал тестовую версию в codepen здесь: https://codepen.io/Jankko/pen/ZEEEJxL

Answer 1

Вы должны добавить style="display:block" к началу вашего активного слайда, чтобы предотвратить мгновенное скрытие элемента, вот так:

<div id="slide2" class="slide slide-active" style="display: block;">
        ...
</div>