캐러셀 스와이프

[최문길]

HTML

    <div class="container-box">
    <div class="container">
        <div class="slide-box">
            < img src="04-level02-코드3줄이미지폴더/car1.png" alt="">
        </div>
        <div class="slide-box">
            < img src="04-level02-코드3줄이미지폴더/car2.png" alt="">
        </div>
        <div class="slide-box">
            < img src="04-level02-코드3줄이미지폴더/car3.png" alt="">
        </div>
    </div>
</div>

<!-- slide-btn1,slide-btn2,slide-btn3이라는 클래스 수정 -->
<button class="slide-btn">1</button>
<button class="slide-btn">2</button>
<button class="slide-btn">3</button>
<button class="next">다음</button>
<button class="pre">이전</button>

<hr />

JAVASCRIPT

 let container = document.querySelector(".container");
    let num = document.querySelectorAll("div[class|='slide']").length;

    let btns = document.querySelectorAll(".slide-btn");
    let count = 0;//next,pre, button들 통합하기 위해 count = 0으로 수정
   
    // 1,2,3버튼 하나로 통합함
    btns.forEach((btn,i)=> {
        btn.addEventListener("click",()=> {
            count = i;
            container.style.transform = `translateX(-${count * 100}vw)`
        })
    })

    // 다음버튼 
    document.querySelector(".next").addEventListener("click",()=> {
        count++;
        if(count == num) {
            count = num - 1;
        }    
        container.style.transform =  `translateX(-${count * 100}vw)`;
    })
    // 이전 버튼
    document.querySelector(".pre").addEventListener("click",()=> {
        console.log(count)
        if(count == num - 1) {
            count--;
            container.style.transform = `translateX(-${count * 100}vw)`;
        } else if(count == 0){
            count = 0;
        }else {
            count--;
            container.style.transform = `translateX(-${count * 100}vw)`;
        } 
    })

<hr />

센세 응용까지 포함해서 foreach문과 count  = 0으로 수정해서 만들었습니다.
개굴사진으로 칭찬해주세욤

<hr />

그런데 말입니다.
btns.forEach((btn,i) 로 버튼 1,2,3 통합 말고
함수로도 해보고싶은데 좀처럼 방향성이 안잡히네요

제가 지금까지 짠 것은

  function move에서 배열의 인덱스 값으로 translateX를 하기 위해 변수로 선언함
   let btns = document.querySelectorAll(".slide-btn");
    function moveSlide(number) {
        number.addEventListener("click",()=> {
             
             // next버튼과 pre버튼도 알아서 잘 돌아가게 하기 위해서 count를 통합해보자

            container.style.transform = `translateX(-${count * 100}vw)`
        });
    }

    move(btns[0]);
    move(btns[1]);
    move(btns[2]);

이런식으로 만들고 싶은데, querySelectorAll로 담아 놓은 유사배열에서
index값을 count = index로 하면 될거 같은데 어떻게 하면 index를 코딩으로 구현 할 지가
안잡혀요 구글 찾아봤는데 (찾아보는것도 실력인듯..) 안보이네요 ㅜㅜ

물론 move(btns[0],0) 
       move(btns[1],1) 이런 식으로 하면 될거 같긴한데 사진이 4장 5장 되면 
또 추가해야하는 번거로움이 있기에 어떻게 하면 될지 너무 궁금해요 

센세 말씀처럼 위에 코드에서는 사진 추가해도 번거러움 없이 자동적으로 다음 버튼, 이전버튼
1,2,3버튼 아무렇게나 눌러도 동작도 되고, 사진 추가 되도 번거러움 없이 HTML에서 
버튼 태그와 클래스만 넣으면 끝나게끔 했는데 제발 알려주세여..

[codingapple]

잘하였읍니다
어짜피 반복문쓰면 되는거라 
move(btns[0],0) 
move(btns[1],1)
해도 될거같은데요

[글쓴이]

글