Javascript [ Slide ]

Slide

• div 2개로 감싸기
  img 들을 좌우배치 후 배치된 사진 중 한장의 사진만 보이게 하기 위해
  -> 첫번째 div , 한장의 사진만 보이게 하기 위함
  -> 두번째 div , img 들을 좌우배치할 태그 ( display : flex )

<div id="first">
	<div id="second">
    	<img />
  	</div>
</div>  

---

중요 설정

• 첫번째 div 의 width, height 와 img 의 width, height 를 동일하게 설정해야 한다.
• 첫번째 div 의 overflow 를 hidden 으로 설정한다.
• 두번째 div 의 display 를 flex 설정한다. ( 가로 )
• 두번째 div 안 img 의 display 가 block 으로 설정 ( 세로 )

---

Transition

• transition : transform 시간
• transform : transform종류(설정값)

transition : transform 1s	/* 이때 1s 은 변형하는 시간 */
transform : tanslateX(숫자px)	/* 양수는 오른쪽 음수는 왼쪽 */

Transform 의 종류

• rotate : 회전
• scale : 확대 또는 축소
• skew : 기울이기
• translate : 이동

Button

• 버튼을 클릭하는 동안
  button:active

• 버튼이 비활성화 되었을 경우
  button:disabled

---

Transform 함수

• 버튼 위치 잡기

const btn_previous = document.querySelector("버튼위치");
const btn_next = document.querySelector("버튼위치");
const images = document.querySelector("두번째 div위치");

• 버튼 비활성화 만들기

버튼이름.setAttribute('disabled', true);
버튼이름.disabled = true;

• 버튼 이벤트 부여하기
  버튼이름.addEventListener('이벤트',함수명)

btn_previous.addEventListener('click', func_previous);
btn_next.addEventListener('click', func_next);

---

Transform 적용

• 기본 요소
  current_index = 0 => 현재 인덱스 번호
  positionValue = 0 => 두번째 div의 위치값
  image_width = width 설정크기 => 이동 width
  image_height = height 설정크기 => 이동 height
  -> 주의 설정크기 px 를 붙이지 말고 숫자로만!!

• 비활성화 설정되어있는 것을 함수 안에서 해제 시키기

버튼이름.removeAttribute('disabled')
버튼이름.setAttribute('disabled',false);
버튼이름.disabled = false;

---

• 이미지를 image_width 만큼 이동

positionValue += image_width;
positionValue += image_height;

• x축 방향 ( 가로 방향 ) 으로 positionValue 만큼 이동
• y축 방향 ( 세로 방향 ) 으로 positionValue 만큼 이동

// CSS 설정이 아닌 JS 로 transform 설정하는 방법
두번째div.style.transform = `translateX(${positionValue}px)`;
두번째div.style.transform = `translateY(${positionValue}px)`;

• 버튼 클릭에 따른 인덱스번호
  -> 다음 버튼 클릭 시 current_index++;
  -> 이전 버튼 클릭 시 current_index--;

---

정리

• 10_slide
  -> slide_horizontality.html, slide_horizontality.css, slide_horizontality.js, slide_vertical.html, slide_vertical.css, slide_vertical.js