[jquery] Carousel을 구현해보자

• js

      let test = 1;

      $(".next").click(function () {
        if (test == 1) {
          $(".slideContainer").css("transform", "translateX(-100vw)");
          test = test + 1;
        } else if (test == 2) {
          $(".slideContainer").css("transform", "translateX(-200vw)");
          test = test + 1;
        }
      });

      $(".previous").click(function () {
        if (test == 3) {
          $(".slideContainer").css("transform", "translateX(-100vw)");
          test = test - 1;
        } else if (test == 2) {
          $(".slideContainer").css("transform", "translateX(0vw)");
          test = test - 1;
        }
      });

test 광역변수에 1이라는 변수를 할당해준다.(콘솔로 확인하면 첫 화면이 1)

그리고 next버튼에 클래스를 지정해주고 click이벤트가 일어나면 if문을 실행한다.

test가 1 이라면 css()메서드를 사용하여 css를 수정한다!

아래 css를 확인해보면 slideContainer(상위)에 300vw 값을 주고, transition: transform 1ms 으로 움직일 때 자연스럽게 보이도록 설정한다.
그리고 slideBox(img감싸고있는box)에 100vw 값을 주고 float:left로 왼쪽으로 정렬한다.
이미지가 이 박스에 꽉 찰 수 있게 100%를 설정한다.

.slideContainer {
  width: 300vw;
  transition: transform 1s;
}

.slideBox {
  width: 100vw;
  float: left;
}

.slideBox img {
  width: 100%;
  
}

수정하는 내용은 상위컨테이너 slideContainer 의 transform의 x축을 이미지의 박스 크기만큼(-100vw)만큼 이동한다.
움직이면서 test = 2를 할당하고 다시 next버튼을 눌렀을 때 test가2라면 100vw만큼 이동하면서 test = 3을 할당한다.
다시 이전으로 돌아가는 버튼도 똑같이 적용해준다!

라이브러리로 구현하고싶다면?

➡ https://kenwheeler.github.io/slick/

1. Slick 자바스크립트, Slick CSS파일, jQuery파일 첨부하기
2. 사용하고 싶은 코드를 복붙하여 사용!