자바스크립트>캐러셀(이미지 슬라이드)만들기

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

어딜가나 있는 UI 라서 한번 만들어봅시다. 

버튼이 많아보이는데 다 한 번에 만들려고 하면 매우 어렵습니다. 그건 천재들이나 하는 것이고

가장 간단한 1개 기능만 먼저 개발하면 쉽습니다.

우린 쉽게 2번 사진 보여주는 버튼의 기능만 먼저 만들어봅시다. 

 

 

 

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

 

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

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

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

4. transition 추가하기 

이거 그대로 하면 된다고 했습니다. 

 

 

 

 

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

 

html css로 알아서 만들면 됩니다. 

css 실력이 가장 중요하겠군요.

 

 

 

▲ 사진이 이렇게 슬라이드되어서 보이려면

사진을 미리 어떻게 배치해놔야할까요? 

 

 

 

 

▲ 사진 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> 

설명하다

 

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

이렇게 코드를 짰더니 이미지 3개가 가로로 배치됩니다. 

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

- 이미지는 없으면 강의하단에 있는 이미지를 사용합시다. 

- 애니메이션 UI 만들기 step 4인 transition은 귀찮아서 미리 추가함 

 

 

 

 

 

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

 

그니까 2번버튼 누르면 2번사진이 슬라이드되어서 보일텐데

그 최종화면을 만들어보라는 소리입니다.

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

 

설명하다

 

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

아까 만든 css파일 중 가로로 긴 박스에 

transition: all 1s;

transform: translateX(-100vw); 이걸 추가하니까 2번사진이 슬라이드되어서 잘 보이는군요. 

이걸 종료화면으로 하면 될듯요 

class로 만들어두고 부착하는 식으로 해도 되겠지만 귀찮으니까 자바스크립트로 직접 부여합시다.

 

 

 

 

 

 

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

 

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

 

다음버튼 만들기

 

버튼을 누르면 다음 사진이 보이는 기능은 어떻게 만들죠?

한글로 설명부터 하면 됩니다.

 

1. 다음버튼 누르면 

2. 지금보이는 사진이 1이면 2번사진 보여주세요 

3. 지금보이는 사진이 2면 3번사진 보여주세요

이거 그대로 코드로 번역하면 되겠네요. 

 

 

 

 

설명하다

 

<button class="next">다음</button>
<script>
  $('.next').on('click', function(){
    if (지금보이는 사진이 1이면) {
      2번사진 보여주세요~
    }
  })
</script>

일단 일부만 번역해봤습니다.

"2번사진 보여주세요~" 코드로 짜는건 저번시간에 했으니 알아서 하시고 

지금 보이는 사진이 1인지 2인지 판단은 어떻게 합니까?

컴퓨터에게 물어봐도 될 것 같긴 한데 더 쉽게 하려면 

그건 사진이 바뀔 때마다 여러분이 직접 기록하면 됩니다. 

 

 

 

 

 

옆에 포스트잇 붙여놓고 지금 몇번사진 보고있는지 숫자로 기록해놓으라는 소리입니다.

그럼 필요할 때 꺼내쓸 수 있지않겠습니까

프로그래밍용 포스트잇을 다른말로 변수라고 부릅니다. 

아무튼 힌트는 여기까지고 알아서 코드짜서 다음버튼 기능 완성해오면 됩니다. 

 

답인데 답보면 의미없음

 

설명하다

 

<button class="next">다음</button>
<script>

  var 지금사진 = 1;

  $('.next').on('click', function(){
    if (지금사진 == 1) {
      $('.slide-container').css('transform', 'translateX(-100vw)');
    } 
    else if (지금사진 == 2){
      $('.slide-container').css('transform', 'translateX(-200vw)');
    }
  })
</script>

그래서 번역이렇게 했다고 합니다.

근데 문제가 있군요 

사진은 바뀌는데 포스트잇은 업데이트가 안되고 있습니다.

var 지금사진 = 1;

이것도 원할 때 잘 수정하면 됩니다.

 

 

 

 

 

설명하다

 

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

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

 

 

[collapse]

 

 

 

 

(응용1) 이전사진 버튼도 집에가서 만들어보십시오

다음사진 버튼이랑 매우 유사하니 알아서 합시다. 

 

 

 

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

지금은 사진이 4개가 되어버리면 다음버튼 JS코드를 귀찮게 수정해야합니다. 

if문을 추가해야할텐데 그게 귀찮으면 사진 갯수와 상관없이 잘 동작하는 코드로 만들 수도 있습니다.

눈치만 좋으면 되니까 알아서 해보는 것도 좋을듯요 

 

잘 보면 다음버튼 누를 때

if 지금사진이 1이면 -100vw 이동

if 지금사진이 2면 -200vw 이동

if 지금사진이 3이면 -300vw 이동

...

이렇게 코드짜고 있지 않습니까. 뭔가 규칙이 보이는데요 

그럼 애초에 if문 필요없이

다음버튼 누르면 'translateX(-지금사진vw)' 만큼 이동해주세요~ 라고 코드한줄 짜면 끝일듯요 

 

문자 중간에 변수를 집어넣고 싶으면

 

var count = 1;
console.log('문자' + count + '문자')

이렇게 쓰면 '문자1문자'가 출력됩니다.

+ 기호를 사용할 때 적어도 1개가 문자가 있으면 수학덧셈이 아니라 문자덧셈을 해줍니다.

문자덧셈은 그냥 좌우를 붙여줍니다. 

이게 문자 중간에 변수넣는 법입니다. 

혹은 나중에 할 것인데 

 

var count = 1;
console.log('문자' + count + '문자');
console.log(`문자${count}문자`)

이렇게 써도  '문자1문자'가 출력됩니다.

물결기호 밑에 있는 백틱기호로 문자를 만들면

문자중간에 ${변수} 이런 식으로 변수를 넣을 수 있습니다.

 

 

[collapse]

그래서 응용2 대충 어떻게 했냐면

 

설명하다

 

<button class="next">다음</button>
<script>

  var 지금사진 = 1;

  $('.next').on('click', function(){
      $('.slide-container').css('transform', 'translateX(-' + 지금사진 + '00vw)');
      지금사진 += 1;
  })
</script>

이렇게 해도 다음버튼이 잘 동작하는군요. 

근데 이번엔 사진이 4개 5개가 되어도 잘 동작합니다.

코드짤 때 어떻게 해야 확장성 있는 코드가 될지 고민해보면 코딩인생이 편해집니다.

 

 

 

[collapse]

 

 

 

(응용3) 버튼2 누르고 다음버튼을 누르면 잘 작동하지 않는 이유가 뭐죠?

컴퓨터는 여러분 명령을 따를 뿐이라 여러분이 명령을 제대로 안줬기 때문입니다. 

버튼1,2,3을 누를 때 포스트잇은 업데이트가 되지 않아서 그럴 것 같군요.