[javascript] 11. 캐러셀(이미지 슬라이드) 만들기

지렁·2023년 9월 23일

JavaScript

홈페이지 메인 화면에 주로 위치하는 광고배너처럼 캐레설 만들어보기 !

캐러셀 : 슬라이드 되는 UI

✏️ one-way 애니메이션이 들어간 UI를 만드는 방법 복습

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

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

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

transition 추가하기

한번 이대로 만들어보자 !

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

우선 html로 애니메이션이 들어가기 전 화면을 아래 사진처럼 구성한다

<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>

overflow: hidden 은 넘치는 요소들과 그로 인해 생기는 스크롤를 숨겨주는 스타일이다
slide-container 안에 slide-box 를 세개와 들어갈 이미지를 추가한다

그리고 클래스 스타일을 지정한다

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

컨테이너는 300vw 그 안의 요소들은 100vw 로 지정한다
그리고 float : left 으로 왼쪽 정렬을 한다
4단계인 transition은 미리 추가하였다
➡️ 이렇게 효과 넣기 전 세팅이 완료되었다

📑 float 란 ?

none (기본값) : 정렬하지 않는다.
left : 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다.

📑 vw 란 ?

vw는 브라우저 폭에 비례한 단위로 100vw는 브라우저 폭의 100%이다

width: 100%
부모 요소의 너비(가로 길이)를 100%로 설정합니다.
부모 요소의 너비에 상대적으로 요소의 너비를 설정합니다.
부모 요소의 크기에 따라 동적으로 조절됩니다.
width: 100vw
뷰포트(Viewport)의 너비(가로 길이)를 100%로 설정합니다.
뷰포트는 웹 페이지가 표시되는 브라우저 창의 영역을 나타냅니다.
뷰포트의 가로 크기에 상대적으로 요소의 너비를 설정합니다.
뷰포트 크기에 따라 동적으로 조절됩니다.

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

2번 슬라이드가 보이기 위해서는 만들어놓은 slide-container를 조절해야 한다
transform의 translate로 요소를 이동시킬 수 있다
2번째 슬라이드가 1번째 슬라이드 위치로 오기 위해서는 좌측으로 100vw 만큼 이동해야한다 ( 전체 길이가 300vw이기 때문에)

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

📑 transform/translate 문법

transform: translateX( 50px )
오른쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 왼쪽으로 이동합니다.
transform: translateY( 50px )
아래쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 위쪽으로 이동합니다.
transform: translate( 50px, 50% )
오른쪽으로 50px, 아래쪽으로 50% 이동합니다.

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

이제 이 효과를 종료 후에 발생시켜야 하기 때문에 jQuery css 를 사용할 것이다

slide-2 버튼을 클릭하면 css 스타일이 적용되도록 하겠다

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

4. transition all 1s

앞에서 미리 추가 완료

나머지 버튼도 구현 완료

    $('.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)')
    })

translateX(0vw)이면 첫번째 사진
translateX(-100vw) 이면 두번째 사진
translateX(-200vw)이면 세번째 사진

💪 응용

이전버튼과 다음버튼도 구현하기
if/else if 문 말고 확장성 있는 코드로 구현하기

다음버튼은 구현이 쉬웠지만 이전버튼에서 조금 헤맸다 ..! 결국 혼자 힘으로 완성😎


    <button class="prev">이전</button>
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>
    <button class="next">다음</button>


    <script>
    let counts=0;
    $('.slide-1').on('click',function(){
        $('.slide-container').css('transform','translateX(0vw)')
    })
    $('.slide-2').on('click',function(){
        counts=1
        $('.slide-container').css('transform','translateX(-100vw)')
    })
    $('.slide-3').on('click',function(){
        counts=2
        $('.slide-container').css('transform','translateX(-200vw)')
    })

    
    $('.next').on('click',function(){
        console.log(counts)
        counts++;
        $('.slide-container').css('transform',`translateX(-${counts}00vw)`)
       
    })
    $('.prev').on('click',function(){
        console.log(counts)
        counts--;
        $('.slide-container').css('transform',`translateX(-${counts}00vw)`)
    })
</script>