티스토리 뷰
안녕하세요!
오늘은 라이브러리 없이 적은 양의 자바스크립트 코드만으로 간단한 이미지 슬라이더를 구현해보았습니다. 이미지 슬라이더 구현하는 방법이야 한트럭이지만, 그 중에 한 가지 방법으로써 '이렇게도 하는구나~'하는정도로 참고해주시면 감사하겠습니다. 그럼 HTML, CSS, JS 순으로 코드를 보겠습니다.
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>Simple Slider</title>
</head>
<body>
<div class="container">
<h1>SIMPLE SLIDER</h1>
<div class="album">
<div class="images">
<img src="images/cat1.jpg">
<img src="images/cat2.jpg">
<img src="images/cat3.jpg">
<img src="images/cat4.jpg">
</div>
</div>
<button class="prev">PREV</button>
<button class="next">NEXT</button>
</div>
<script src="script.js">
</script>
</body>
</html>
|
제목을 나타내는 h1 태그와 이미지 네 장을 품고 있는 div 태그들, 그리고 button 태그 두 개를 작성해주었습니다.
스타일시트는 styles.css 파일을, 자바스크립트 코드는 script.js 파일을 각각 생성하여 연결해주었습니다.
참고로 이미지는 아무거나 사용하시면 되는데, 여기에서는 너비가 640px 인 이미지들을 사용하였습니다.
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
.container{
width: 640px;
margin: 0 auto;
}
h1{
text-align: center;
}
.album{
height: 400px;
width: 640px;
overflow: hidden;
}
.images{
position: relative;
display: flex;
height: 400px;
}
img{
width: 640px;
height: 400px;
}
button, button:active, button:focus{
width: 100px; height: 30px;
border: none;
color: white;
background-color: teal;
outline: none;
}
button:hover{
background-color: turquoise;
}
button:disabled{
background-color: gray;
}
.prev{
float: left;
}
.next{
float: right;
}
|
너비가 640px인 이미지들로 구성된 이미지 슬라이드를 구현하기 위해 이미지 네 장 중 하나의 이미지만 노출되도록 이미지를 가로 일렬로 배치했고(15번 줄의 display: flex;) 한 장 외에는 보이지 않는 상태로 만들었습니다(11번 줄의 overflow: hidden;).
그외 나머지 스타일은 거의 다 심미성을 고려하여 지정한 스타일입니다.
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
let curPos = 0;
let postion = 0;
const IMAGE_WIDTH = 640;
const prevBtn = document.querySelector(".prev")
const nextBtn = document.querySelector(".next")
const images = document.querySelector(".images")
function prev(){
if(curPos > 0){
nextBtn.removeAttribute("disabled")
postion += IMAGE_WIDTH;
images.style.transform = `translateX(${postion}px)`;
curPos = curPos - 1;
}
if(curPos == 0){
prevBtn.setAttribute('disabled', 'true')
}
}
function next(){
if(curPos < 3){
prevBtn.removeAttribute("disabled")
postion -= IMAGE_WIDTH;
images.style.transform = `translateX(${postion}px)`;
curPos = curPos + 1;
}
if(curPos == 3){
nextBtn.setAttribute('disabled', 'true')
}
}
function init(){
prevBtn.setAttribute('disabled', 'true')
prevBtn.addEventListener("click", prev)
nextBtn.addEventListener("click", next)
}
init();
|
여기에서의 핵심은 PREV버튼(4번 줄)을 클릭했을 때는 prev 함수가 호출되고, NEXT버튼(5번 줄)을 클릭했을 때는 next 함수가 호출되도록 해준 것입니다(init 함수 내부). 각 이미지에 인덱스 번호(curPos)가 있다고 가정하고, 0일 때는 더이상 앞으로 갈 수 없고 3일 때는 더이상 뒤로 갈 수 없음을 코드로 표현해주기도 했습니다.
이미지가 슬라이드하는 방식은 스타일 속성 transform으로 X축 위치를 변경시키는 방식을 사용했습니다(12번 줄과 23번 줄).
코드에 대한 소개는 이상입니다. 마지막으로 이렇게 완성된 이미지 슬라이드의 캡쳐 이미지를 보이면서 마무리하겠습니다.
감사합니다. 즐코딩하세요!
'IT > 프로그래밍' 카테고리의 다른 글
| 자바스크립트 무한스크롤 구현하기 (라이브러리 사용없이 간단히) (1) | 2021.03.08 |
|---|---|
| 자바스크립트 모바일 터치 슬라이더 구현하기 (feat. 터치 이벤트) (0) | 2021.02.27 |
| 자바스크립트 타이핑 효과 구현하기 (3) | 2021.02.19 |
| WOW.js 사용법 : 스크롤 애니메이션 라이브러리 (1) | 2021.02.11 |
| [Javascript] 로또번호 추첨하기 (0) | 2020.12.28 |