2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
안녕하세요. 선생님! 프로젝트 팀원이 잠수로 런해서 백엔드하다가 프론트를 하게 되었습니다. 그러다보니 리액트 먼저 듣다가 자바스크립트를 하게 되었습니다.
몇 가지 질문이 있습니다.
1. 캐러셀 관련 숙제를 해봤는데 한번 검사 부탁드리겠습니다.
-------------------
---- (HTML) ----<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>carousel</title> <link rel="stylesheet" href="main.css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous" ></script> </head> <body> <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" draggable="false" /> </div> <div class="slide-box"> < img src="car3.png" draggable="false" /> </div> </div> </div>
<script> let 캐러셀 = $(".slide-container"); let 클릭위치 = 0; // px 단위 let 이동거리 = 0; // px 단위 let 이미지클릭 = false; let 보이는이미지 = 0; // vw 단위캐러셀.on("mousedown", function (e) { 클릭위치 = e.clientX; 이미지클릭 = true; });// 100vw : 현재위치 = window px : ?
캐러셀.on("mousemove", function (e) { if (이미지클릭 == true) { 이동거리 = e.clientX - 클릭위치; 캐러셀.css( "transform", `translateX(${ (보이는이미지 * $(window).width()) / 100 + 이동거리 }px)` ); } });캐러셀.on("mouseup", function (e) { // 이동거리가 (-150 이하, 150 이상) 이면 // 다음, 이전 이미지로 바꾼다. // 이동거리가 (-150 초과, 150 미만) 이면 // 원래 이미지로 돌아온다 // 첫 번째 이미지 이전, 마지막 이미지 이후로는 스와이프 되지 않도록 한다. 이미지클릭 = false; 이미지클릭 = false; // 이미지 오른쪽으로 이동(이전 이미지 보임) if (보이는이미지 < 0 && 이동거리 >= 150) { 보이는이미지 += 100; 캐러셀.css("transform", `translateX(${보이는이미지}vw)`); } else if (보이는이미지 > -200 && 이동거리 <= -150) { // 현재 위치가 마지막 이미지면 다음 이미지로 못감 // 이미지가 왼쪽으로 이동(다음 이미지 보임) 보이는이미지 -= 100; 캐러셀.css("transform", `translateX(${보이는이미지}vw)`); } else { // 조금만 움직인 경우 다시 원래 이미지로 돌아온다 캐러셀.css("transform", `translateX(${보이는이미지}vw)`); } }); </script> </body> </html>---- (HTML 끝) ---- ---- (CSS 시작) ---- -- 관련 없는 부분은 생략함 --
.slide-container { width: 300vw; transition: all 0.2s; }.slide-box { width: 100vw; float: left; }.slide-box img { width: 100%; }---- (CSS 끝) ---- ------------------- 제가 생각한 개선해볼만한 것들은 1) 이동거리, 보이는이미지 등 하드 코딩된 부분 2) 첫번째 이미지에서 왼쪽으로 이동, 마지막 이미지에서 오른쪽 이동해도 계속 이미지가 순환 이렇게 2가지가 있습니다.
2. 강의 하실 때는 <script> 태그를 새로 만들어서 쓰시는 것 같은데 보통 여러 개를 쓰나요? 아니면 따로 .js 파일을 만들어서 쓰는 편이 많을까요?
3. 자주 쓰일 것 같은 캐러셀, 모달창 같은 UI 컴포넌트(?)들을 모아서 레포지토리를 만들어볼까 생각중인데 걍 부트스트랩 쓰고 그 시간에 다른 프로젝트를 하는 게 나을까요? 긴 글 읽어주셔서 감사합니다.
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.