[코딩애플;JS]캐러셀만들기

   <div style="overflow: hidden">

        <div class="slide-container">

          <div class="slide-box">

            <img src="https://codingapple.com/wp-content/uploads/2022/02/car1.png">

          </div>

          <div class="slide-box">

            <img src="https://codingapple.com/wp-content/uploads/2022/02/car2.png">

          </div>

          <div class="slide-box">

            <img src="https://codingapple.com/wp-content/uploads/2022/02/car3.png">

          </div>

        </div>

     </div>

     <button class="slide-prev">이전</button>

     <button class="slide-btn">1</button>

     <button class="slide-btn">2</button>

     <button class="slide-btn">3</button>

     <button class="slide-next">다음</button>

 

.slide-container{

    width: 300vw;

    transition: all .5s;

}

.slide-box{

    width: 100vw;

    float: left;

}

.slide-box img{

    width: 100%;

}

 

 

    //슬라이드 버튼 인덱스 번호와 맞는 슬라이드 보여주기

    var slide_btn = document.querySelectorAll('.slide-btn');

 

    slide_btn.forEach(function(el,index){

      el.addEventListener('click',function(){

       var left = -100 *index + 'vw';

       console.log(left)

       document.querySelector('.slide-container').style.transform =''+'translateX('+left+')'+'';

      })  

    });

 

forEach구문을 사용해서 각각 index값을 찾아서 함수가 작동하게끔 만듬

 

배열.forEach(function (현재요소, 인덱스값,원본배열){

코드작성

}

 

https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-foreach-%ED%95%A8%EC%88%98/

자바스크립트 forEach() 함수 – 개념 정리 및 사용 예제 - 코딩에브리바디

 

 //이전버튼

    var i = 0 ;

    document.querySelector('.slide-prev').addEventListener('click',function(){

      if(i > 0){

      i--;

      var prev = (i * -100) + 'vw';

      document.querySelector('.slide-container').style.transform =''+'translateX('+prev+')'+'';

      }

    });

    //다음버튼

    document.querySelector('.slide-next').addEventListener('click',function(){

      if(i < document.querySelectorAll('.slide-box').length - 1){

        i++;

      var next = (i * -100) + 'vw';

      document.querySelector('.slide-container').style.transform =''+'translateX('+next+')'+'';

      }

    });

 

임의의 값 i 를 0으로 설정한 후

이전버튼의 경우 현재 i 값이 0보다 커야한다. 안 그러면 무한으로 이전으로 넘어감.

다음버튼의 경우 현재 i 값이 슬라이드 배열의 길이보다 1작은 값보다 작아야한다. 안그러면 역시 무한으로 다음으로 넘어감.

 

버튼을 누를때마다 i값이 증감하고, 그 값만큼

-100vw에 곱해서 옮겨질 값을 구하여 적용한다.