16. carousel (1)

Carousel

---

캐러셀이란?

슬라이드 되는 UI들을 캐러셀이라고 합니다.

어떻게 만들까?

step1. 애니메이션 시작 전 화면 만들기

<div style="overflow: hidden">
    <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>
 </div>

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

이미지 3개를 가로로 길게 배치 합니다.

step2. 애니메이션 종료 후 화면 만들기

.slide-container {
  width: 300vw;
  transform: translateX(-100vw); ------ ⑴
}

2번 버튼을 누르게 되면 2번 사진이 보여져야 합니다.

⑴ 의 속성을 추가하면 2번 사진이 보여지게 됩니다.

step3. 언제 종료화면으로 변할지 JS 코드 짜기

<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>

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

버튼2를 누르면 최종화면으로 변하는 코드.

step4. transition 추가하기

.slide-container {
  width: 300vw;
	transition: all 1s;
}