캐러셀 (이미지 슬라이드) 만들기

셀라문·2022년 3월 29일
0

JS UI

목록 보기
5/15
post-thumbnail

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

one-way 애니메이션들어간 UI 만드는 법은

  1. 애니메이션 시작 전 화면 만들기
  2. 애니메이션 종료 후 화면 만들기
  3. 언제 종료화면으로 변할지 JS 코드짜기
  4. transition 추가하기

one-way 애니메이션들어간 UI 만들기

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

▲ 사진 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 미리 줌)

  • vw 단위는 브라우저 폭에 비례한 단위입니다. 100vw는 브라우저 폭의 100%입니다.

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

2번버튼 누르면 2번사진이 슬라이드되어서 보일텐데
그 최종화면을 만들어보라는 소리입니다.

어떤 html 요소를 왼쪽으로 이동시키는건 margin-left 아니면 transform 속성을 사용하면 됩니다.

.slide-container {
  width: 300vw;
  transition: all 1s;
  transform: translateX(-100vw);
} 

아까 만든 css파일 중 가로로 긴 박스에
transform: translateX(-100vw); 이걸 추가하니까 2번사진이 슬라이드되어서 잘 보이는군요.
이걸 종료화면으로 하면 될듯합니다.

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

$('.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. 지금보이는 사진이 1이면 2번사진 보여주세요
  3. 지금보이는 사진이 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일 때 다음버튼누르면

  • 2번사진 보임
  • var 지금사진이 +1 됨

이런 식으로 잘 동작하겠군요.

(응용2) 사진이 4개, 5개가 되어도 다음버튼 기능이 잘 동작하려면?

지금은 사진이 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개가 되어도 잘 동작합니다.

참고 : 코딩애플

profile
예비 개발자의 공부기록장

1개의 댓글

comment-user-thumbnail
2022년 9월 8일

게시물 잘 봤습니다 ㅎㅎ 혹시 이전버튼도 만들어보셨나요? 만드셨으면 도움 받고 싶습니다!

답글 달기