이미지 슬라이더 (Carousel)

자기소개 페이지를 둘러보다가, 우리집 내새꾸 자랑하는 페이지에서 세로로 쭉 나열된 내새꾸 사진들을 개선하면 좋을 것 같아 이미지 슬라이드를 적용시켰다.

사실 '자바스크립트 코드 3줄컷 ㅅㄱ'보고 끌린것 맞음

참고 : 코딩애플 '딱 자바스크립트 3줄로 만드는 DIY 이미지 슬라이더'
https://youtu.be/qHzSQrLjxlQ

캡쳐 된 이미지지만 완성된 모습은 대충 이렇다.

아랫쪽에 버튼이 있고, 그 버튼을 누르면 해당 순서에 있는 이미지를 슬라이드식으로 가져오는 식이다.
그리고 기본 버튼이 너무나도 못생겨서.. 버꾸(버튼 꾸미기라는 뜻 ㅋ^^ㅋ)도 놓칠 수 없었다.

어떻게 했냐면-

슬라이드 시킬 이미지를 div사이에 있는 div에 하나하나 가둬주고
대장div와 그 속에있는 div들에게 class명을 부여해준다.

<div class="carousel">
	<div class="pics">
    	<img src="pic1.jpg">
    </div>
    <div class="pics">
	    <img src="pic2.jpg">
    </div>
</div>

그리고, 각 div에게 css적용을 해주는데
대장 div인 carousel에겐 vw값을 200으로 주고,
각각의 이미지인 pics class엔 vw값을 100으로,
그리고 가로로 쭉 배치해주기 위해 float값을 왼쪽으로 줌.

마지막으로 원본 이미지다보니까 브라우저로 봤을 때 어마무시하게 크다.
이미지 크기도 width값을 줘서 작게 만들어야지 ^.^

vw = viewport width
현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환해준다는 뜻

  .carousel {
     width: 200vw;
  }
  .pics {
     width: 100vw;
     float: left;
  }
  .pics img {
     width: 400px;
  }

여기까지 작성하면 가로 스크롤이 무지무지하게 생길건데,
div를 감싼 div를 또 div로 감싸줘서 스타일을 통해 스크롤을 없애준다.

<div style="overflow: hidden"> // 바로 요놈
  <div class="carousel">
      <div class="pics">
          <img src="pic1.jpg">
      </div>
      <div class="pics">
          <img src="pic2.jpg">
      </div>
  </div>
</div>

이제 HTML과 CSS로 큰 틀은 만들었다.
남은건 버튼과 버튼을 눌렀을 때 그에 맞게 작동하는 코드..!

버튼을 만들고 버튼 하나하나에 개별 class명을 부여해주었다.
왜냐면 1번 버튼 눌렀는데 1번 사진이 나오고 2번 버튼 누르면 2번 사진이 나와야하는데,
1번 눌러도 1번 사진, 2번 눌러도 1번 사진 나오면 안되자너... 내새꾸 자랑해야하는데..

<button class="bt1">1</button>
<button class="bt2">2</button>

이제 버튼을 만들었으니까 버튼 누르면 그에 맞는 이미지를 볼 수 있어야한다.
도와줘요.. 자바스크립트..!
HTML에서 JavaScript를 로드해야하니 스크립트 사이에 해당 버튼이 움직일 수 있게 생며..ㅇ..이 아니고 코드를 입력해주자.

<script>
    document.querySelector('.bt1').addEventListener('click', function(){
    document.querySelector('.carousel').style.transform = 'translate(0vw)';
        });
	document.querySelector('.bt2').addEventListener('click', function(){
    document.querySelector('.carousel').style.transform = 'translate(-100vw)';
      });
</script>

2번버튼을 예시로 들어서 설명하자면,
bt2 클래스 값을 가진것을 클릭을 하게되면 -100vw만큼 이동해주세여라는 뜻

여기까지 코드를 작성해도 작동은 잘된다. 아쉬움이 남을 뿐..
버튼을 누르면 이미지만 바뀌는게 아닌 옆으로 멋지게 스르륵 미끄러져서 이동하게 해보자.
CSS를 통해 애니메이션을 주면 됨! 0.5초를 걸쳐서 트랜스폼 해달라고 부탁을 해보자.

  .carousel {
     width: 200vw;
     transition: transform 0.5s;
  }

여기까지 이미지 슬라이더는 완성했다.

이제 못생긴 버튼을 꾸며보자. 검색한다.. 구글..!
아래 블로그를 참고하여 버튼을 꾸며보았다.

참고 : 블로그 'IT에 취.하.개.' CSS 버튼 예쁘게 꾸미기
https://hongku.tistory.com/300

  .buttons button{
    border: 1px solid black;
    background-color: rgba(0,0,0,0);
    color: black;
    padding: 5px;
  }
  .buttons button:hover{
    color:white;
    background-color: black;
  }
  .bt1{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-right:-1px;
  }
  .bt2{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-left:-3px;
  } 

내 소개 페이지가 검은색이니까 그에 맞게 흰/검으로 바꾸어주었다.
가장 왼쪽과 가장 오른쪽에 있는 버튼엔 모서리를 border-위/아래-왼/오-radius를 통한 라운드처리로 동글동글한 맛이 나게 해줬고,
hover를 통해 커서를 올리기 전엔 흰 바탕에 검은 글씨, 커서를 올리게 되면 검은 바탕에 흰 글씨가 되도록 만들었다.

남은건 정렬과 마진값을 요리조리 만져서 소개페이지와 잘 어우러지게 만들어주기.

참 쉽죠?! ^.~