캐러셀 스와이프 기능에 대해서 막힌 부분이 있습니다

5 글 보임 - 1 에서 5 까지 (총 5 중에서)

글쓴이

글

2024년 2월 21일 18:24 #113968

참가자

안녕하십니까 선생님..
"JavaScript 입문과 웹 UI개발" 과정을 수강중입니다
Level 3 중 "캐러셀에 스와이프 기능 만들기 숙제 & 터치이벤트" 를 듣고 있는데
도저히 안풀리는 문제가 있습니다

직면한 문제점 : 
현재 이 코드에서 0번째 사진에서 기능들 정상작동
나머지 console.log 들도 해당 이미지에 맞게 잘 출력됌

다만 에러가 안풀리는 에러가 1가지 있음
에러 내용 : 1번째 , 2번째 사진에서 mousedown 후 mousemove 하면 0번째 사진으로 자동 이동됌

이 에러를 해결하려면 어떻게 할까요 ..?

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link href="main.css" rel="stylesheet" />

    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>

    <title>Hello, world!</title>
  </head>
  <body class>
    <div class="black-bg">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <form action="success.html">
          <div class="my-3">
            <input type="text" class="form-control" id="ID" />
          </div>
          <div class="my-3">
            <input type="password" class="form-control" id="PW" />
          </div>
          <button type="submit" class="btn btn-primary" id="send">전송</button>
          <button type="button" class="btn btn-danger" id="close">닫기</button>
        </form>
      </div>
    </div>

    <script>
      document
        .querySelector(".black-bg")
        .addEventListener("click", function (e) {
          // e.target; // 유저가 실제로 누른것
          // e.currentTarget; // 이벤트리스너 달린 곳
          // this; // 상동 (e.currentTarget;)
          // e.preventDefault(); // 이벤트 기본동작 막아줌
          // e.stopPropagation(); // 내 상위요소로 이벤트 버블링 막아줌

          if (e.target === document.querySelector(".black-bg")) {
            document.querySelector(".black-bg").classList.remove("show-modal");
          }
        });
    </script>

    <script>
      // $("#send").on("click", function (e) {
      $("form").on("submit", function (e) {
        var inId = document.getElementById("ID").value;
        var inPw = document.getElementById("PW").value;

        if (inId === "") {
          e.preventDefault();
          alert("id가 공백입니다");
        } else if (/\S+@\S+\.\S+/.test(inId)) {
          alert("email 형식에 맞지 않음");
        } else if (inPw === "") {
          e.preventDefault();
          alert("pw가 공백입니다");
        } else if (inPw.length < 6 || /[A-Z]/.test(inPw) == false) {
          e.preventDefault();
          alert("pw는 6자 이상, 영어 대문자를 포함해서 입력하세요");
        }
      });
    </script>

    <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <span class="navbar-brand">wookShop</span>
        <span class="badge bg-dark">Dark 🔄</span>
        <button class="navbar-toggler" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="scrolling"></div>
    </nav>

    <script>
      // window.addEventListener("scroll", function () {
      //   window.scrollY;
      //   // window.scrollTo(x, y); // 강제 스크롤
      // });

      $(window).on("scroll", function () {
        if ($(window).scrollTop() > 100) {
          $(".navbar-brand").addClass("navbar-brandSmall");
        } else {
          $(".navbar-brand").removeClass("navbar-brandSmall");
        }
      });
    </script>

    <script>
      $(window).on("scroll", function () {
        var 실제높이 = document.querySelector("html").scrollHeight;
        var 스크롤양 = document.querySelector("html").scrollTop;
        var 보이는높이 = document.querySelector("html").clientHeight;
        console.log(실제높이, 스크롤양, 보이는높이);

        if (스크롤양 < 보이는높이 * 0.1) {
          $(".scrolling").css("width", "1%");
        } else if (스크롤양 <= 보이는높이 * 0.5) {
          $(".scrolling").css("width", "50%");
        } else if (스크롤양 >= 보이는높이) {
          $(".scrolling").css("width", "100%");
        }
      });
    </script>

    <script>
      // badge 클릭횟수가 홀수면 내부 글자를 Light로 변경
      // badge 클릭횟수가 짝수면 내부 글자를 Dark로 변경
      var count = 0;
      // 내답;
      $(".badge").on("click", function () {
        count++;
        if (count % 2 === 0) {
          $(".badge").html("Dark 🔄");
        } else if (count % 1 === 0) {
          $(".badge").html("Light 🔄");
        }
        console.log(count);
      });

      // // 강의답
      // $(".badge").on("click", function () {
      //   count += 1;
      //   if (count % 2 == 1) {
      //     $(".badge").html("Light 🔄");
      //   } else {
      //     $(".badge").html("Dark 🔄");
      //   }
      //   console.log(count);
      // });
    </script>

    <ul class="list-group">
      <li class="list-group-item">An item
      <li class="list-group-item">A second item
      <li class="list-group-item">A third item
      <li class="list-group-item">A fourth item
      <li class="list-group-item">And a fifth one

    <div class="main-bg">
      <h4>shirts on Sale</h4>
      <button id="loginBtn" class="btn btn-danger">로그인</button>
    </div>

    <div style="height: 1000px"></div>

    <div style="overflow: hidden">
      <div class="slide-container">
        <div class="slide-box">
          < img src="car1.png" draggable="false" />
        </div>
        <div class="slide-box">
          < img src="car2.png" />
        </div>
        <div class="slide-box">
          < img src="car3.png" />
        </div>
      </div>
    </div>

    <script>
      var 시작좌표 = 0;
      var 눌렀냐 = false;

      $(".slide-box")
        .eq(0)
        .on("mousedown", function (e) {
          시작좌표 = e.clientX;
          눌렀냐 = true;
        });

      $(".slide-box")
        .eq(0)
        .on("mousemove", function (e) {
          console.log(e.clientX - 시작좌표);
          console.log("지금 0");

          if (눌렀냐 === true) {
            $(".slide-container").css(
              "transform",
              `translateX(${e.clientX - 시작좌표}px)`
            );
          }
        });

      $(".slide-box")
        .eq(0)
        .on("mouseup", function (e) {
          눌렀냐 = false;

          if (눌렀냐 === false) {
            console.log("0 시작좌표", 시작좌표);
            console.log("0 e.clientX", e.clientX);
            console.log("0 오 -> 왼 양수", 시작좌표 - e.clientX);
            console.log("0 왼 -> 오 양수", e.clientX - 시작좌표);
            console.log("0 지금사진", nowPicture);

            if (시작좌표 - e.clientX > 0 && 시작좌표 - e.clientX > 100) {
              nowPicture++;

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

              console.log("+1", nowPicture);
            } else {
              $(".slide-container")
                .css("transition", "all 0.5s")
                .css("transform", "translateX(-" + nowPicture + "00vw)");

              console.log("0번 보여줘야함");
            }

            setTimeout(() => {
              $(".slide-container").css("transition", "none");
            }, 500);
          }
        });

      $(".slide-box")
        .eq(1)
        .on("mousedown", function (e) {
          시작좌표 = e.clientX;
          눌렀냐 = true;
        });

      $(".slide-box")
        .eq(1)
        .on("mousemove", function (e) {
          console.log(e.clientX - 시작좌표);
          console.log("지금 1");

          if (눌렀냐 === true) {
            $(".slide-container").css(
              "transform",
              `translateX(${e.clientX - 시작좌표}px)`
            );
          }
        });

      $(".slide-box")
        .eq(1)
        .on("mouseup", function (e) {
          눌렀냐 = false;

          if (눌렀냐 === false) {
            console.log("1 시작좌표", 시작좌표);
            console.log("1 e.clientX", e.clientX);
            console.log("1 오 -> 왼 양수", 시작좌표 - e.clientX);
            console.log("1 왼 -> 오 양수", e.clientX - 시작좌표);
            console.log("1 지금사진", nowPicture);

            if (시작좌표 - e.clientX > 0 && 시작좌표 - e.clientX > 100) {
              nowPicture++;

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

              console.log("+1", nowPicture);
            } else {
              $(".slide-container")
                .css("transition", "all 0.5s")
                .css("transform", "translateX(-" + nowPicture + "00vw)");

              console.log("1번 보여줘야함");
            }

            setTimeout(() => {
              $(".slide-container").css("transition", "none");
            }, 500);
          }
        });

      $(".slide-box")
        .eq(2)
        .on("mousedown", function (e) {
          시작좌표 = e.clientX;
          눌렀냐 = true;
        });

      $(".slide-box")
        .eq(2)
        .on("mousemove", function (e) {
          console.log(e.clientX - 시작좌표);
          console.log("지금 2");

          if (눌렀냐 === true) {
            $(".slide-container").css(
              "transform",
              `translateX(${e.clientX - 시작좌표}px)`
            );
          }
        });

      $(".slide-box")
        .eq(2)
        .on("mouseup", function (e) {
          눌렀냐 = false;

          if (눌렀냐 === false) {
            console.log("2 시작좌표", 시작좌표);
            console.log("2 e.clientX", e.clientX);
            console.log("2 오 -> 왼 양수", 시작좌표 - e.clientX);
            console.log("2 왼 -> 오 양수", e.clientX - 시작좌표);
            console.log("2 지금사진", nowPicture);

            if (시작좌표 - e.clientX > 0 && 시작좌표 - e.clientX > 100) {
              nowPicture++;

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

              console.log("+1", nowPicture);
            } else {
              $(".slide-container")
                .css("transition", "all 0.5s")
                .css("transform", "translateX(-" + nowPicture + "00vw)");

              console.log("2번 보여줘야함");
            }

            setTimeout(() => {
              $(".slide-container").css("transition", "none");
            }, 500);
          }
        });

      // 모바일 버젼
      var 시작좌표 = 0;
      var 눌렀냐 = false;

      $(".slide-box")
        .eq(0)
        .on("touchstart", function (e) {
          시작좌표 = e.touches[0].clientX; // 몇 번째 손가락인지?
          눌렀냐 = true;
        });

      $(".slide-box")
        .eq(0)
        .on("touchmove", function (e) {
          console.log(e.changedTouches[0].clientX - 시작좌표);

          if (눌렀냐 === true) {
            $(".slide-container").css(
              "transform",
              `translateX(${e.changedTouches[0].clientX - 시작좌표}px)`
            );
          }
        });

      $(".slide-box")
        .eq(0)
        .on("touchend", function (e) {
          눌렀냐 = false;

          if (눌렀냐 === false) {
            console.log("시작좌표", 시작좌표);
            console.log("e.clientX", e.changedTouches[0].clientX);
            console.log(
              "오 -> 왼 양수",
              시작좌표 - e.changedTouches[0].clientX
            );
            console.log(
              "왼 -> 오 양수",
              e.changedTouches[0].clientX - 시작좌표
            );
            console.log("지금사진", nowPicture);

            if (
              시작좌표 - e.changedTouches[0].clientX > 0 &&
              시작좌표 - e.changedTouches[0].clientX >= 100
            ) {
              $(".slide-container")
                .css("transition", "all 0.5s")
                .css("transform", "translateX(-100vw)");
            } else if (시작좌표 - e.changedTouches[0].clientX < 100) {
              $(".slide-container")
                .css("transition", "all 0.5s")
                .css("transform", "translateX(0vw)");
            }

            setTimeout(() => {
              $(".slide-container").css("transition", "none");
            }, 500);
          }
        });
    </script>

    <button class="preview">이전</button>
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>
    <button class="next">다음</button>

    <script>
      var nowPicture = 0;
      var imgLength = $(".slide-box").length;

      $(".preview").on("click", function () {
        if (nowPicture > 0) {
          nowPicture--;
          $(".slide-container").css(
            "transform",
            "translateX(-" + nowPicture + "00vw)"
          );
          console.log("1 마이너스", nowPicture);
        }
        // else if (nowPicture === 1) {
        //   $(".slide-container").css("transform", "translateX(0vw)");
        //   console.log("1 에서 못내려감", nowPicture);
        // }
      });

      $(".slide-1").on("click", function () {
        nowPicture = 0;
        $(".slide-container").css(
          "transform",
          "translateX(" + nowPicture + "00vw)"
        );
      });

      $(".slide-2").on("click", function () {
        nowPicture = 1;
        $(".slide-container").css(
          "transform",
          "translateX(-" + nowPicture + "00vw)"
        );
      });

      $(".slide-3").on("click", function () {
        nowPicture = 2;
        $(".slide-container").css(
          "transform",
          "translateX(-" + nowPicture + "00vw)"
        );
      });

      $(".next").on("click", function () {
        if (nowPicture < imgLength - 1) {
          nowPicture++;
          $(".slide-container").css(
            "transform",
            "translateX(-" + nowPicture + "00vw)"
          );
          console.log("1 추가요", nowPicture);
        }
      });
    </script>

    <div class="alert alert-danger">
      <span id="count">5</span>초 이내 구매시 사은품 증정!
    </div>

    <script>
      var countdown = 4;

      setInterval(function () {
        if (countdown !== 0) {
          $("#count").html(countdown);
          countdown--;
        } else if (countdown === 0) {
          $(".alert").hide();
          clearTimeout();
        }
      }, 1000);
    </script>

    <script>
      document
        .querySelector(".navbar-toggler")
        .addEventListener("click", function () {
          document.querySelectorAll(".list-group")[0].classList.toggle("show");
        });

      // $("#loginBtn").on("click", function () {
      //   $(".black-bg").show();
      // });

      // $("#close").on("click", function () {
      //   $(".black-bg").hide();
      // });

      $("#loginBtn").on("click", function () {
        $(".black-bg").addClass("show-modal");
      });

      $("#close").on("click", function () {
        $(".black-bg").removeClass("show-modal");
      });
    </script>

    <!-- 
    <p class="hello">안녕</p>
    <p class="hello">안녕</p>
    <p class="hello">안녕</p>
    <button id="test-btn">버튼</button>

    <script>
      // document.querySelector(".hello").innerHTML = "바보";
      $(".hello").html("바보");

      // document.querySelector("#test-btn").addEventListener();
      $("#test-btn").on("click", function () {
        $(".hello").slideUp();
      });

      document
        .querySelector(".navbar-toggler")
        .addEventListener("click", function () {
          document.querySelectorAll(".list-group")[0].classList.toggle("show");
        });
    </script> -->

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>

    <div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas
      voluptatum minus praesentium fugit debitis at, laborum ipsa itaque placeat
      sit, excepturi eius. Nostrum perspiciatis, eligendi quae consectetur
      praesentium exercitationem.
    </div>

    <script>
      $(".lorem").on("scroll", function () {
        var 스크롤양 = document.querySelector(".lorem").scrollTop;
        var 실제높이 = document.querySelector(".lorem").scrollHeight;
        var 눈에보이는div높이 = document.querySelector(".lorem").clientHeight;

        if (스크롤양 + 눈에보이는div높이 === 실제높이) {
          alert("다 읽음");
        }
        // if (스크롤양 + 눈에보이는div높이 > 실제높이 - 10) {
        //   // 오차범위 체크
        //   alert("다 읽음");
        // }
      });
    </script>
  </body>
</html>


현재 전체 코드 입니다!

2024년 2월 21일 20:01 #113980

codingapple

키 마스터

1번사진 mousemove 하면 `translateX(${e.clientX - 시작좌표}px)` 로 이동시키는데 여기다가 -100vw정도 더해줘야할듯요

2024년 2월 21일 22:33 #113994

박신욱

참가자

감사합니다! ㅎ 이제 보니 < img src="car2.png" draggable="false" /> 도 안했더라구요

2024년 3월 24일 00:45 #117508

박지우

참가자

저도 같은 증상이라 들어오게 되었는데요

          $('.slide-container').css('transform', `translateX(-100vw + ${e.clientX - 시작좌표})`);

이렇게 코딩애플님 말씀대로 -100vw 만큼 더하면 첫번째 사진으로 돌아가진 않지만
드래그 하는 만큼 움직이다 슬라이드 되지 않고 그냥 한번에 슬라이드가 됩니다ㅜㅜ 도와주세요

2024년 3월 24일 09:24 #117517

codingapple

키 마스터

css에서 뭐 더할때는 translateX(calc(100vw + 50px)) 이렇게써야합니다

글쓴이

글

5 글 보임 - 1 에서 5 까지 (총 5 중에서)

답변은 로그인 후 가능합니다.

로그인

캐러셀 스와이프 기능에 대해서 막힌 부분이 있습니다

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png