이미지 슬라이드 버튼 이벤트 코드 최종버전

• let nowPicture = 1; 변수를 만듬
• 2번째 사진이 보이게 함
  • 이미지 박스 폯은 100vw이다.
  • 첫번째 사진이 보일 때, 사진 컨테이너가 X축 기준으로 -100vw이동하면, 두번째 사진이 보인다.
  • -100 = 변수 * -100
• 변수에 1을 추가한다.
• 반복
• 3번째 사진이 보이게 하려면
  • 첫번째 사진에서 사진 컨테이너가 X축 기준으로 -200vw 이동하면, 세번째 사진이 보인다
  • -200 = 변수 * -100
• 조건문을 사용한 이유
  • 사용하지 않으면, 조건문이 끝나도 버튼이 계속 작동하여 오른쪽으로 계속이동하여 흰 화면만 보인다.

$(".slide-container").css(
      "transform",
      "translateX(-" + nowPicture + "00vw)"
);

//js 전체코드
let nowPicture = 1;
let 이동;
$(".slide-right-btn").on("click", function () {
  if (nowPicture > 0 && nowPicture < 4) {
    $(".slide-container").css(
      "transform",
      "translateX(-" + nowPicture + "00vw)"
    );
    nowPicture = nowPicture + 1;
  }
});

$(".slide-left-btn").on("click", function () {
  if (nowPicture > 1 && nowPicture <= 4) {
    이동 = (nowPicture - 2) * -100;
    $(".slide-container").css("transform", "translateX(" + 이동 + "vw)");
    nowPicture = nowPicture - 1;
  }
});