By aPOST in 티스토리스킨 — 2023년 12월 23일

Javascript 없이 CSS 만으로 동작하는 이미지 슬라이더

자바스크립트 없이 CSS 만으로 동작하는 이미지 슬라이더 입니다.

이미지 갯수에 따라 조정해야하는 내용이 많아서 보통은 자바스크립트로 이미지 슬라이더를 이용하지만, 자바스크립트 없이 가볍게 돌려야 하거나, 자바스크립트에 익숙하지 않을 때 사용하면 유용합니다.

기본적인 CSS 문법 정도는 아는 분이면 커스터마이징을 할 수 있겠지만

아니면 아래 이미지 크기 변경 방법만 따라해서 이미지 크기 정도 조정해서 제공된 파일들을 그대로 복사해서 사용하면 됩니다.

css_image_slider

css_image_slider.zip

370 KB

기본 사용법

압축파일을 다운로드 받아 풀면

CSS 파일들과

cssslider3.html

cssslider4.html

cssslider5.html

이렇게 3개의 html 파일이 있습니다.

뒤에 붙은 숫자는 이미지 갯수에 따라 구현을 다르게한 것이므로 사용할 이미지 갯수에 따라 적당한 걸 골라서 사용하면 됩니다.

이렇게 만든 이유는 이미지 갯수가 달라지면 CSS 이미지 슬라이더의 애니메이션 구현 CSS 코드가 많이 달라지기 때문에 최소한의 수정만으로 사용할 수 있게 하기 위해서 입니다.

데모에 사용된 이미지는 800px * 523px 크기입니다.

파일 호출 순서는 다음과 같습니다.

cssslider[이미지갯수].html ->style[이미지갯수].css ->anim[이미지갯수]-[h/v].css

anim[이미지갯수]-[h/v].css

파일은 "이미지갯수" 별로 가로(h), 또는 세로(v)로 애니메이션을 주는 것을 구분하는 것입니다.

style[이미지갯수].css 파일의 맨위 첫줄에

@import url("anim4-v.css");

이부분의 anim4-v.css 파일 이름을 원하는 것으로 수정해주면 됩니다.

예를 들어

anim4-v.css 파일은 이미지 4장을 세로(위에서 아래)로 애니메이션을 주면서 로테이션이 됩니다.

이미지 갯수 변경

cssslider[이미지갯수].html

파일들에서 원하는 이미지 갯수인 html 파일을 사용하면 됩니다.

html 파일안의 "<ul>" 태그안에 있는 "li" 태그 갯수만큼이 이미지 갯수가 됩니다.

5번째줄의 css 파일을 가져오는 행에서

"style[이미지갯수].css"

가 원하는 이미지 갯수에 맞는 css 파일을 가져오는 행입니다.

이미지 크기 변경

데모에 사용된 이미지 크기는 800px * 532px 입니다.

style[이미지크기].css

파일을 텍스트 편집기에서 열어 "800", "532" 숫자를 사용할 이미지 크기 가로값과 세로값으로 변경합니다.

style[이미지크기].css

파일 최상단의

@import url("anim3-v.css");

에서 애니메이션 방향을 변경합니다.(세로는 v, 가로는 h 입니다.)

위에서 사용하기로한 anim[이미지갯수]-[방향].css 파일을 텍스트 편집기로 엽니다.

마찬가지로 "800", "532" 숫자를 사용할 이미지 크기 가로값과 세로값으로 변경합니다.

브라우저에서 html파일을 열어 정상 동작하는지 확인.

애니메이션 방향 변경

사용할 anim[이미지갯수]-[방향].css 파일을 텍스트 편집기에서 엽니다.

가로방향 애니메이션은 기본적으로 왼쪽에서 오른쪽으로

세로방향 내이메이션은 위에서 아래로 애니메이션입니다.

가로 방향 애니메이션(h) CSS 파일인 경우

"left" 문자열을 "right"로 모두 변경하면 오른쪽에서 왼쪽으로 애니메이션 됩니다.

가로 방향 애니메이션(anim*-h.css) CSS 파일인 경우

"left" 문자열을 "right"로 모두 변경하면 오른쪽에서 왼쪽으로 애니메이션 됩니다.

세로 방향 애니메이션(anim*-v.css) CSS 파일인 경우

"top" 문자열을 "bottom"로 모두 변경하면 오른쪽에서 왼쪽으로 애니메이션 됩니다.

애니메이션 재생 시간 변경

style[이미지갯수].css 파일을 열면

11, 12, 13행 그리고 22행 "[시간-초]s" 문자열이 있습니다.

예를 들면

"20s" 로 되어있는 경우

총 슬라이더 시간이 20초라는 뜻입니다.

이미지를 4개를 사용하는 경우 슬라이더 이미지 1장에 5초씩 돌아가면서 보이게 됩니다.

텍스트 편집기에서 style[이미지갯수].css 파일을 열어

"20s를 "10s"로 변경하면 이미지 한개당 2.5초에 한번씩 애니메이션 되면서 슬라이더가 반복됩니다.