2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
안녕하세요. 강의 보고 javascript로 캐러셀을 구현해보고 싶어서 구현하고, 응용 부분도 적용을 해보려고 하는데 코드가 잘 작성되지 않아서요.
<hr />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {margin:0;padding:0;} ul,li {list-style: none;} .carousel_wrap { position: relative; overflow: hidden; width: 100vw; } .carousel_container { display: flex; flex-wrap: nowrap; white-space: nowrap; /* transition: all 1s ease-in-out; */ width: 100vw; } .carousel_box { width: 100vw; } .carousel_box img { width: 100vw; } </style> </head> <body> <div class="carousel_wrap"> <ul class="carousel_container"> <li class="carousel_box carousel_box1">< img src="/img/car1.png" alt=""> <li class="carousel_box carousel_box2">< img src="/img/car2.png" alt=""> <li class="carousel_box carousel_box3">< img src="/img/car3.png" alt=""> <li class="carousel_box carousel_box4">< img src="/img/car1.png" alt=""> <li class="carousel_box carousel_box5">< img src="/img/car2.png" alt=""> </div> <button class="slide_prev">이전</button> <button class="slide_button slide_button1">1</button> <button class="slide_button slide_button2">2</button> <button class="slide_button slide_button3">3</button> <button class="slide_button slide_button3">4</button> <button class="slide_button slide_button3">5</button> <button class="slide_next">다음</button><script> //init let slideIdx = 0;
let slideButton = document.querySelectorAll('.slide_button'); slideButton.forEach ( (btn, index) => btn.addEventListener('click',function(){ slideIdx = index; console.log(slideIdx) slideTransition(slideIdx); }) ) //console.log(slideButton.length-1) document.querySelector('.slide_next').addEventListener('click',function(){ if(slideIdx >= 0 && slideIdx !== (slideButton.length-1)) { slideIdx += 1; slideTransition(slideIdx); } else {} })
document.querySelector('.slide_prev').addEventListener('click',function(){ (slideIdx != 0) ? slideIdx -= 1 : slideIdx = 0 ; slideTransition(slideIdx); })function slideTransition(num){ let translatePos = 0; (slideIdx == 0) ? translatePos = 0 : translatePos = 100 * num; document.querySelector('.carousel_container').style.transform = `translateX(-${translatePos}vw)`; }let slideBox = document.querySelector('.carousel_box');let swipeActive = false; let firstPint = 0; let nowPoint = 0; slideBox.forEach( (bx, idx) => bx.addEventListener('mousedown', (e) =>{ e.preventDefault(); firstPint = e.clientX; swipeActive = true; }) )slideBox.forEach( (bx2, idx) => bx2.addEventListener('mousemove', (e) =>{ e.preventDefault(); if(swipeActive===true){ nowPoint = e.clientX; document.querySelector('.carousel_container').style.transform = `translateX(${firstPint - nowPoint}px )`; console.log(swipeActive) } }) ) slideBox.forEach( (bx3, idx) => bx3.addEventListener('mouseup', (e) =>{ e.preventDefault(); swipeActive===true; }) ); </script> </body> </html><hr />
전체 슬라이드 각 요소에서 작동되는 형태로 구현을 해보고 싶어서 위처럼 작성을 해봤습니다. 근데, 이렇게 하니 잘 안되어서 코드 리뷰 요청 드립니다.ㅠ <span style="color: #0000ff;"> let slideBox = document.querySelectorAll('.carousel_box');</span> <span style="color: #0000ff;"> slideBox.forEach( (bx, idx) => bx.addEventListener('mousedown', </span> 선택자 부분과 각 이벤트를 연결하는 부분을 이렇게 했는데요. mouseup 이벤트가 잘 작동되지 않습니다. 아래처럼 계속 move 이벤트가 없어지지 않고 마우스가 움직이는 대로 화면이 바뀌어서요. 어딜 수정 해야 할지 감이 안 잡혀서 질문을 드리게 되었습니다!
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.