슬라이드되는 UI들을 캐러셀이라고 합니다.
one-way 애니메이션들어간 UI 만드는 법은
- 애니메이션 시작 전 화면 만들기
- 애니메이션 종료 후 화면 만들기
- 언제 종료화면으로 변할지 JS 코드짜기
- transition 추가하기
▲ 사진 3개를 가로로 길게 배치해놔야하지않을까요?
그리고 나중에 이거 전체를 왼쪽으로 이동시키면 되니까요.
그럼 html css로 저렇게 코드를 짜봅시다.
<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>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
.slide-container {
width: 300vw;
transition: all 1s;
}
.slide-box {
width: 100vw;
float: left;
}
.slide-box img {
width: 100%;
}
이렇게 코드를 짰더니 이미지 3개가 가로로 배치됩니다.
(4번인 transition 미리 줌)
2번버튼 누르면 2번사진이 슬라이드되어서 보일텐데
그 최종화면을 만들어보라는 소리입니다.
어떤 html 요소를 왼쪽으로 이동시키는건 margin-left 아니면 transform 속성을 사용하면 됩니다.
.slide-container {
width: 300vw;
transition: all 1s;
transform: translateX(-100vw);
}
아까 만든 css파일 중 가로로 긴 박스에
transform: translateX(-100vw); 이걸 추가하니까 2번사진이 슬라이드되어서 잘 보이는군요.
이걸 종료화면으로 하면 될듯합니다.
$('.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)');
});
밑에 자바스크립트로
버튼2 누르면 최종화면으로 변하라고 코드짜봤습니다.
jQuery로 찾은 요소에 .css() 주면 style 속성 변경이 가능합니다.
- 다음버튼 누르면
- 지금보이는 사진이 1이면 2번사진 보여주세요
- 지금보이는 사진이 2면 3번사진 보여주세요
이거 그대로 코드로 번역하면 되겠네요.
<button class="next">다음</button>
<script>
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;
}
})
</script>
다음버튼 누를 때 마다 지금사진을 +1 하라고 추가했습니다.
그럼 지금사진이 1일 때 다음버튼누르면
이런 식으로 잘 동작하겠군요.
지금은 사진이 4개가 되어버리면 다음버튼 JS코드를 귀찮게 수정해야합니다.
if문을 추가해야할텐데 그게 귀찮으면 사진 갯수와 상관없이 잘 동작하는 코드로 만들 수도 있습니다.
잘 보면 다음버튼 누를 때
if 지금사진이 1이면 -100vw 이동
if 지금사진이 2면 -200vw 이동
if 지금사진이 3이면 -300vw 이동
...
이렇게 코드짜고 있지 않습니까. 뭔가 규칙이 보이는데요
그럼 애초에 if문 필요없이
다음버튼 누르면 'translateX(-지금사진vw)' 만큼 이동해주세요~ 라고 코드한줄 짜면 됩니다
<button class="next">다음</button>
<script>
var 지금사진 = 1;
$('.next').on('click', function(){
$('.slide-container').css('transform', 'translateX(-' + 지금사진 + '00vw)');
지금사진 += 1;
})
</script>
이렇게 해도 다음버튼이 잘 동작하는군요.
근데 이번엔 사진이 4개 5개가 되어도 잘 동작합니다.
참고 : 코딩애플
게시물 잘 봤습니다 ㅎㅎ 혹시 이전버튼도 만들어보셨나요? 만드셨으면 도움 받고 싶습니다!