티스토리 뷰
안녕하세요! 오늘은 모바일 전용 이미지 슬라이더를 간단하게 구현해보았습니다. 모바일에서는 손가락을 이용해 영역을 터치하면 터치이벤트가 발생하게 되는데, 이 터치의 시점과 위치를 잘 이용하면 버튼 없이 손가락만으로 움직일 수 있는 이미지 슬라이더 구현이 가능합니다. 그럼 바로 코드를 볼텐데, 참고로 코드 구성은 index.html + styles.css + script.css 세 가지입니다.
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!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>Slider for mobile</title>
</head>
<body>
<h1>SWIPE!</h1>
<div class="album">
<div class="images">
<img src="https://image.beansdrawer.com/short-hair/milk-cow/n04-03.jpg">
<img src="https://image.beansdrawer.com/short-hair/mackerel/n00-01.jpg">
<img src="https://image.beansdrawer.com/short-hair/mackerel/n00-00.jpg">
<img src="https://image.beansdrawer.com/short-hair/cheeze/n01-01.jpg">
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
|
태그는 단순히 이미지 네 장을 포함하고 있는 블록 영역을 만드는 것 외에 특별한 사항이 없습니다. 이미지는 제가 개인적으로 보관하고 있는 제 개인 서버(?)의 사진들을 사용하고 있습니다. styles.css를 연결해주고 script.js도 연결해주는 걸 잊어서는 안됩니다(각각 7번 줄과 20번 줄).
styles.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
html, body{ margin: 0; }
h1{ text-align: center; }
.album{
height: 300px;
width: 375px;
overflow: hidden;
}
.images{
position: relative;
display: flex;
height: 300px;
transition: transform 0.5s;
}
img{
width: 375px;
}
|
스타일에도 특별한 것은 없습니다. 모든 이미지를 적절한 크기로 표시해주기 위해 너비를 375px로 맞춰주었다, 정도? 여기에 더해 .images 영역의 position을 relative로 지정해주었는데, 이는 translateX를 사용해 X축 이동을 시켜줌으로써 슬라이드 효과를 주려는 의도입니다.
script.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
|
let curPos = 0;
let postion = 0;
let start_x, end_x;
const IMAGE_WIDTH = 375;
const images = document.querySelector(".images")
images.addEventListener('touchstart', touch_start);
images.addEventListener('touchend', touch_end);
function prev(){
if(curPos > 0){
postion += IMAGE_WIDTH;
images.style.transform = `translateX(${postion}px)`;
curPos = curPos - 1;
}
}
function next(){
if(curPos < 3){
postion -= IMAGE_WIDTH;
images.style.transform = `translateX(${postion}px)`;
curPos = curPos + 1;
}
}
function touch_start(event) {
start_x = event.touches[0].pageX
}
function touch_end(event) {
end_x = event.changedTouches[0].pageX;
if(start_x > end_x){
next();
}else{
prev();
}
}
|
prev 함수와 next 함수는 각각 '앞으로가기'와 '뒤로가기' 기능을 수행하는 함수입니다. 그리고 각각의 함수는 사용자가 터치 이벤트를 발생시킨, 즉 손가락으로 화면을 문지르는 순간에 호출됩니다(touch_end 함수).
여기에서는 사용자의 터치 이벤트를 감지하기 위해 addEventListner를 통해 touchstart 이벤트와 touchend 이벤트에 대한 이벤트 리스너를 등록해주었는데, 각각의 이벤트는 '손가락이 닿는 순간'과 '닿아있던 손가락이 화면에서 떨어지는 순간'을 의미합니다. 이때 이벤트 객체는 터치가 이루어진 지점의 위치를 속성으로 가지는데(pageX), 이를 읽어들여 오른쪽으로 스와이프 했는지 왼쪽으로 스와이프 했는지를 판단할 수 있습니다(touch_end 함수 내부를 보시면 이해 가능합니다).
이상입니다. 모바일에서 사용할 만한 이미지 슬라이더 관련 기능을 제공하는 라이브러리가 많이 있겠지만, 라이브러리의 헤비(heavy)함을 굳이 감당하기보다 바닐라 자바스크립트로 딱 필요한 기능만 구현하는 것도 좋은 방법인 것 같습니다. 아무쪼록 도움이 되셨기를 바라면서, 그럼 오늘은 여기까지, 포스팅을 마무리하도록 하겠습니다. 감사합니다.
'IT > 프로그래밍' 카테고리의 다른 글
| 웹 호스팅 서비스 netlify 사용법 : 내가 만든 웹사이트 배포하기! (1) | 2021.03.19 |
|---|---|
| 자바스크립트 무한스크롤 구현하기 (라이브러리 사용없이 간단히) (1) | 2021.03.08 |
| 자바스크립트 이미지 슬라이드 구현하기 (0) | 2021.02.24 |
| 자바스크립트 타이핑 효과 구현하기 (3) | 2021.02.19 |
| WOW.js 사용법 : 스크롤 애니메이션 라이브러리 (1) | 2021.02.11 |