코드 3줄로 캐러셀 (이미지 슬라이드) 만들기

애니메이션 만드는법

애니메이션 있는 UI를 만들고 

처음 화면 만들고

나중 화면 만들고

원할때 화면 전환되게 하고 

transition: all 1s; 추가한다

 

이미지 3개를 준비해서 각 이미지를 넘겨서 보여주는 슬라이드를 만들어 보자

  <div class = 'slide-container'>
        <div class = 'slide-box'>
          <img src = "car1.png">
        </div>
        <div class = 'slide-box'>
          <img src = "car2.png">
        </div>
        <div class = 'slide-box'>
          <img src = "car3.png">
        </div>
      </div>

 

큰 박스안에 3개의 슬라이드를  만들어준다.

 

..slide-container{
    width: 300vw;
}
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
}

css 는 다음과 같이 한다 vw는 브라우저의 폭이다 

브라우저 폭의 3배 만큼 박스를 만들고 3개의 박스를 넣어 

하나를 넘길때마다 브라우저를 꽉 채우는 한칸의 이미지를 보여줄수있다.

 

이미지를 넣으면서 경로에서 문제가 생긴거 같은데 잘 나오지않았다 

그래서 따로 파일을 만들어 넣어주었다

 

 

img/car1.png 이렇게 접근하면 된다. 

 

 

그리고 이미지가 커서 화면을 넘어 가로 스크롤이 생길수 있는데 

style 에서 

"overflow: hidden"  을 이용해 나머지 부분을 잘라준다

 

 

 

.slide-container{
    width: 300vw;
    //margin-left: -100vw;
    //transform: translateX(-100vw);
    // 같은 기능인데 성능이 아래가 더 좋음
}

 

margin 을 좌측으로 100만큼 이동시키면 다음 slide-box 가 나오게 된다 

200만큼 이동한다면 3번째 이미지가 나온다

 

 

 

 

그래서 버튼 클릭시 다음 클래스를 추가한다는 코드를 짜면 될것 같다

 

 

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