[JS/CSS] Carousel (Slider)은 어떻게 만들까

사전지식

 

 

CSS

 

• position

레이아웃 위치 맞출때 참 중요한 프로퍼티

기능 : 엘리먼트 위치 조절시 기준을 누구로할지 정함. ( 위치변경 자체는 left top 등으로 조절해야함)

 

position 속성값	기준	변경가능
static (기본값)	기본	left등으로 변경불가
relative	static일때 위치를 기준으로 위치조절	가능
absolute	속성값이 relative/absolute/fixed인 부모를 기준 (없을시 body기준)	가능
fixed	브라우저 프레임 기준으로 위치가 고정된다	가능

 

• transition 

CSS 속성값이 변할때, 변하는 속도를 제어

속성(프로퍼티)	설명	기본값
transition-property	트랜지션이 적용될 대상 속성 지정	all
transition-duration	트랜지션 지속시간. 단위 : s 또는 ms	0s
transition-delay	트랜지션 시작까지 걸리는 딜레이 시간 지정	0s
transition-timing-function	트랜지션 중간값 계산하는 방법(수치 함수) 지정	ease
transition	위 속성들을 한번에 지정하기위한 단축속성. 숫자로 지정된 값이 2개일시 duration delay 순서로 적용	0s all ease 0s

 

• animation/keyframes

애니메이션 : element에 적용되는 css 스타일을 다른 css 스타일로 부드럽게 전환시키는것

2가지 요소로 이루어짐(animation/keyframes)

 

-animation : 애니메이션을 나타냄. 총시간/반복여부 지정

속성(프로퍼티)	설명	기본값
animation-name	중간 상태 지정할 대상 @keyframes 규칙을 이용해 기술
animation-duration	한 싸이클의 애니메이션 지속시간. 단위 s 또는 ms	0s
animation-delay	엘리먼트 로드 후 언제 애니메이션이 시작될지	0s
animation-direction	애니메이션 종료 후 다시 처음부터 시작할지 역방향일지	normal
animation-iteration-count	몇 번 반복할지. infinite로 무한반복가능	1
animation-play-state	애니메이션을 재생상태 (running 또는 paused) 지정	running
animation-timing-function	중간 상태 변화에 대한 시간조정함수	ease
animation	단축속성	위의 기본값

 

 

-keyframes : 애니메이션 중간상태 제어. 애니메이션의 흐름을 여러 지점으로 나눠 CSS 값을 설정가능

형태 : @keyframes keyframes-name { 지점 { 속성 }, ... }

keyframes-name 값의 대상은 animation-name 프로퍼티값으로 설정

지점 설정 방법

from, to 키워드 이용 : from{ } to{ } 키워드  : 시작-끝 시점

숫자% 이용 : ex) 0%{ } 50%{ } 100%{ } : (시작)0~50(중간)~100(끝) 지점별 제어

 

*transition 과 animation 의 차이점?

transition은 엘리먼트에 변화가 있을때 적용하는것이다. 직접 변화를 설정하진 못한다.

animation은 엘리먼트에 직접 변화를 설정하는것이다. 

 

• transform

엘리먼트에 대한 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)

 

 

 

JS

 

예제에서 ECMAScript 2015(ES6) 문법을 사용했음 (const/let/class/arrow function 등)

 

 

 

 

Carousel

화면전환방식

• 화면이 사라지고 그자리를 다른 화면이 채우는방식

CSS의 opacity 프로퍼티를 이용한다.

 

 

See the Pen fade-in carousel by findaw (@findaw) on CodePen.

 

-HTML

button class가 적용된 태그 :  이전,다음버튼

nav 클래스가 적용된 태그 : 현재 active된 이미지 인덱스를 나타냄

 

-CSS

fadeIn 클래스가 없는 아이템은 모두 display:none 적용

fadeIn 클래스가 있으면 display:inline 적용하면서 불투명도(opacity)를 0~1로 1초간 animation

서서히 이미지가 나타나는 구조

 

-JS

css선택자는 자바스크립트에서 제어

 

 

 

*자동으로 넘어가는 캐러셀

 

See the Pen fade in carousel auto by findaw (@findaw) on CodePen.

JS

setInterval이용

마우스를 아이템 위에 두면 clearInterval로 자동함수 종료

마우스가 떠나면 다시 setInterval 실행

 

 

 

 

• 화면을 밀어내고 그자리를 다른 화면이 채우는방식

 

wrapper로 요소를 묶고 wrapper의 위치를 요소의 width만큼 +- 조절하여

wrapper가 이동하면서 container 영역에서 보여지는 좌표를 변하게한다.

 

구성

1.  div등의 태그로 아이템들을 감싼다.(wrapper)

그 영역 안에서 아이템들을 딱붙여 수평 정렬되게 한다. 

 

display : flex; 속성을 주거나 

2. wrapper를 또 div등의 태그로 감싼다(container).

3. container의 CSS 프로퍼티값으로

overflow:hidden;
width : 아이템 너비;

 

 

 

 

 

 

  See the Pen https://codepen.io/findaw/pen/QPXBpa/">
  slideCarousel by findaw (https://codepen.io/findaw">@findaw)
  on https://codepen.io">CodePen.

 

*자동