스파르타코딩 내일배움캠프 DAY 12 TIL - 캐러셀

오늘은 캐러셀을 만들어봤습니다.

자바스크립트는 교과서라고 들었습니다.

기본이 탄탄해야 심화문제도 잘 풀어나가듯이, 자바스크립트로 기본적인 것들을 구현중입니다.
오늘은 넷플릭스처럼 하나의 이미지를 옆으로 넘길 수 있는 캐러셀을 만들어봤습니다.

사실, 부트스트랩이나 캐러셀 라이브러리를 통해서 기능을 구현하면 정말 순식간에 뚝딱 만들어지더라구요.

하.지.만
꼭 자바스크립트로 구현을 해보고 싶은 마음이 들어서 하루종일 매달렸습니다.
현재 사진을 3장정도 넣었을 때, 해당 사진으로 이동 및 이전,다음 버튼을 통한 이동은 자유자재로 가능합니다만,

추후에 사진이 N장이 생긴다면 반복문 관련하여 다시 코드를 재정비해봐야 겠습니다.
(사진이 n장일 때, 다음버튼은 쉽게 구현했는데, 이전 버튼이 정말 구현하기가 쉽지가 않더라구요.)

   <div style="overflow: hidden"> -> 가득차지 않도록 hidden으로 묶어주기
      <div class="slide-container">
        <div class="slide-box">
          <img src="img/10.jpeg" />
        </div>
        <div class="slide-box">
          <img src="img/11.jpeg" />
        </div>
        <div class="slide-box">
          <img src="img/12.jpeg" />
        </div>
      </div>
    </div>
    -> 총 3장의 사진들을 div안에 담았습니다.
    
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>
    <button class="before">이전</button>
    <button class="next">다음</button>
-> 다음으로는 각각의 버튼들을 만들어서 자바스크립트를 이용하여, 버튼을 누르면 해당 화면이 나오도록 설정을 했습니다. 

-> 먼저 1,2,3 각각의 버튼을 누른다면, translateX가 0, -100, -200vw로 바뀌도록 설정을 했습니다.
     $(".slide-1").on("click", function () {
        $(".slide-container").css("transform", "translateX(0vw)");
      });

      $(".slide-2").on("click", function () {
        $(".slide-container").css("transform", "translateX(-100vw)");
      });

      $(".slide-3").on("click", function () {
        $(".slide-container").css("transform", "translateX(-200vw)");
      });
      
      

-> 여기서 조금 헷갈렸네요.
현재 화면을 변수로 잡아서, 다음(next)버튼을 누를 시, translateX가 변경이 되면서 지금사진에 +1이 되게끔 구현을 했습니다.
특히 var count와 관련된 변수를 통하여 현재의 ~~를 저장하는 것은 아직 익숙치가 않아서 다루기가 조금 난감했습니다.
다만, 이번 캐러셀을 직접 만들어보면서 저도모르게 익히게 된 것 같아서 조금은 뿌듯하네요.

 var 지금사진 = 1;
   $(".next").on("click", function () {
     if (지금사진 === 1) {
       $(".slide-container").css("transform", "translateX(-100vw)");
       지금사진 += 1;
     } else if (지금사진 === 2) {
       $(".slide-container").css("transform", "translateX(-200vw)");
       지금사진 += 1;
     }