2023-05-04 14:28
14 min
JavaScript로 이미지 슬라이더를 만들어 웹 사이트를 강화하는 방법
웹 페이지 특정 영역에 여러 이미지나 영상을 보여주고 싶은데, 공간을 많이 차지하고 싶지 않을 때가 있으신가요? 또는 웹페이지에 상호작용 요소를 더하거나 좀 더 매력적으로 만들고 싶으신가요?
이미지 슬라이더를 사용하면 이런 고민을 해결할 수 있습니다. 이 글에서는 이미지 슬라이더가 무엇인지, 만들 때 필요한 사전 조건과 HTML, JavaScript, CSS를 사용해 어떻게 만드는지 알아보겠습니다.
이미지 슬라이더란 무엇일까요?
슬라이더는 텍스트, 이미지, 영상 등을 회전하는 방식으로 보여주는 슬라이드 쇼입니다. 여기서는 이미지 슬라이더에 초점을 맞춰 설명하겠습니다. 대부분의 웹 개발자들은 홈페이지에서 슬라이더를 사용하여 제안이나 중요한 정보를 강조합니다.
웹 페이지에 슬라이더를 사용하는 몇 가지 이유는 다음과 같습니다.
- 사용자 경험 향상: 이상적인 웹페이지는 간결해야 합니다. 사용자가 중요한 정보를 얻기 위해 너무 많이 스크롤하지 않도록 해야 합니다. 이미지가 여러 개라면 슬라이더로 보여줘서 스크롤 부담을 줄일 수 있습니다.
- 시각적 매력 증가: 대부분의 웹사이트 방문자는 평범한 웹페이지에 오래 머무르지 않습니다. 슬라이더와 애니메이션을 사용하면 시각적인 매력을 높일 수 있습니다.
- 공간 절약: 웹페이지에 20개 정도의 이미지를 표시하고 싶다면 공간을 많이 차지할 수 있습니다. 슬라이더를 만들면 공간을 절약하면서 사용자에게 모든 이미지를 보여줄 수 있습니다.
- 동적 콘텐츠 표시: 슬라이더를 사용해서 소셜 미디어 게시물, 블로그, 뉴스 같은 동적 콘텐츠를 표시할 수 있습니다.
이미지 슬라이더 제작 전 준비사항
- HTML 기본 지식: 슬라이더 구조를 이해해야 합니다. 다양한 HTML 태그, 클래스, div를 다룰 수 있어야 합니다.
- CSS 기본 지식: CSS를 사용해 이미지 슬라이더와 버튼 스타일을 꾸밀 수 있어야 합니다.
- JavaScript 기본 지식: JavaScript를 사용해서 이미지 슬라이더를 반응형으로 만들 수 있어야 합니다.
- 코드 편집기: 원하는 편집기를 사용하면 됩니다. 여기서는 Visual Studio Code를 사용하겠습니다.
- 이미지 모음: 슬라이더에 사용할 이미지가 필요합니다.
프로젝트 폴더 설정하기
프로젝트 폴더, 그 안에 이미지 폴더, HTML, CSS, JavaScript 파일이 필요합니다. 제 프로젝트 이름을 “Image-Slider”로 지정하겠습니다. 프로젝트를 직접 만들거나 다음 명령어를 사용해도 됩니다.
mkdir 이미지-슬라이더
cd 이미지-슬라이더
mkdir 이미지 && touch index.html styles.css script.js
프로젝트 폴더 안에 만든 “이미지” 폴더에 모든 이미지를 넣고 다음 단계로 넘어갑니다.
저는 슬라이더를 만들 때 사용할 6개의 이미지를 추가했습니다. 모든 HTML 코드는 index.html 파일에 있습니다.
이미지 슬라이더 종류
이미지 슬라이더에는 두 가지 종류가 있습니다. 버튼이 있는 자동 슬라이더와 순수 자동 슬라이더입니다.
#1. 자동 이미지 슬라이더
자동 슬라이더는 지정된 시간(예: 3초)마다 자동으로 다음 이미지로 넘어갑니다.
HTML 코드
다음은 HTML 코드입니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<div id="slider">
<div class="slide">
<h1>아프리카</h1>
<img src="Images/img1.jpg" >
</div>
<div class="slide">
<h1>미국</h1>
<img src="Images/img2.jpg" >
</div>
<div class="slide">
<h1>아시아</h1>
<img src="Images/img3.jpg" >
</div>
<div class="slide">
<h1>아랍</h1>
<img src="Images/img4.jpg" >
</div>
<div class="slide">
<h1>현대</h1>
<img src="Images/img5.jpg" >
</div>
<div class="slide">
<h1>유럽</h1>
<img src="Images/img6.jpg" >
</div>
</div>
<script src="script.js"></script>
</body>
</html>
여기서 다음 사항을 확인할 수 있습니다.
- CSS 파일을 <head> 섹션에서 index.html 파일로 불러왔습니다. 이후 단계에서 사용됩니다.
- <body> 태그 바로 앞에 JavaScript를 추가했습니다. JavaScript를 사용해 슬라이더 기능을 추가할 것입니다.
- 모든 슬라이드에는 'slide' 클래스가 있습니다.
- <img> 태그를 사용해 이미지 폴더에서 이미지를 가져왔습니다.
CSS를 사용해 자동 이미지 슬라이더 스타일 지정
이미 CSS와 HTML 파일을 연결했으므로 이제 이미지 스타일을 지정할 수 있습니다.
CSS 파일에 다음 코드를 추가하세요.
#slider {
width: 80%;
}
.slide {
width: 80%;
display: none;
position: relative;
}
.slide img {
width: 80%;
height: 80%;
}
.slide.active {
display: block;
}
여기서 다음 사항을 확인할 수 있습니다.
- 슬라이더 너비와 높이를 80%로 설정했습니다.
- 활성 슬라이드를 ‘block’으로 설정했습니다. 즉, 현재 슬라이드만 보이고 나머지는 숨겨집니다.
JavaScript를 추가해 이미지 슬라이더를 반응형으로 만들기
script.js 파일에 다음 코드를 추가하세요.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide() {
slides[currentSlide].className="slide";
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className="slide active";
}
이 JavaScript 코드는 다음 기능을 수행합니다.
- document.querySelectorAll 선택자를 사용해 'slide' 클래스를 가진 모든 요소를 가져옵니다.
- currentSlide 변수를 0으로 초기화합니다.
- slideInterval을 2000(2초)로 설정합니다. 즉, 슬라이더 이미지가 2초마다 변경됩니다.
- 이 코드 `slides[currentSlide].className = 'slide';`는 현재 슬라이드에서 'active' 클래스를 제거합니다.
- 이 코드 `currentSlide = (currentSlide + 1) % slides.length;`는 현재 슬라이드 인덱스를 증가시킵니다.
- 이 코드 `slides[currentSlide].className = 'slide active';`는 현재 슬라이드에 'active' 클래스를 추가합니다.
자동 슬라이더는 다음과 같이 작동합니다.
#2. 버튼이 있는 자동 슬라이더
지금까지 만든 이미지 슬라이더는 2초마다 자동으로 넘어가도록 되어있습니다. 이제 사용자가 버튼을 클릭해서 다음 슬라이드로 넘어갈 수도 있고, 버튼 클릭이 없으면 3초마다 자동으로 넘어가는 슬라이더를 만들 수 있습니다.
HTML 코드
index.html 파일의 내용을 다음과 같이 변경할 수 있습니다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이미지 슬라이더</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="mySlides">
<img src="Images/img1.jpg" style="width:100% ; height:50vh" >
</div>
<div class="mySlides">
<img src="Images/img2.jpg" style="width:100% ; height:50vh">
</div>
<div class="mySlides">
<img src="Images/img3.jpg" style="width:100% ; height:50vh">
</div>
<div class="mySlides">
<img src="Images/img4.jpg" style="width:100% ; height:50vh">
</div>
<div class="mySlides">
<img src="Images/img5.jpg" style="width:100% ; height:50vh">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" >
</div>
<div class="column">
<img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" >
</div>
<div class="column">
<img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" >
</div>
<div class="column">
<img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" >
</div>
<div class="column">
<img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" >
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
이 HTML 코드는 다음과 같이 작동합니다.
- 5개의 이미지를 표시하는 mySlides 클래스가 있습니다.
- 사용자가 슬라이드를 넘길 수 있도록 onClick 이벤트가 있는 “prev” 및 “next” 버튼이 있습니다.
- 웹페이지 하단에 이미지 썸네일이 있습니다.
CSS 코드
CSS 코드에 다음 내용을 추가하십시오.
* {
box-sizing: border-box;
}
.container {
position: relative;
}
.mySlides {
justify-content: center;
}
.cursor {
cursor: pointer;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: rgb(34, 143, 85);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.caption-container {
text-align: center;
background-color: orangered;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 16.66%;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
CSS 코드는 다음과 같이 작동합니다.
- `.mySlides` 클래스의 display 속성을 `none`으로 설정했습니다. 즉, 모든 슬라이드는 기본적으로 숨겨집니다.
- 활성화된 `.demo:hover {opacity: 1;}` 규칙을 통해 썸네일 위에 마우스를 올렸을 때 불투명도를 1로 설정했습니다.
JavaScript 코드
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
let slideInterval = setInterval(() => {
plusSlides(1);
}, 3000);
let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
clearInterval(slideInterval);
});
slideshowContainer.addEventListener('mouseleave', () => {
slideInterval = setInterval(() => {
plusSlides(1);
}, 3000);
});
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
여기서 최종 소스코드를 확인할 수 있습니다.
JavaScript 코드는 다음과 같이 작동합니다.
- display 값이 none으로 설정된 currentSlide 함수가 있습니다. 이 규칙을 사용하면 현재 슬라이드만 웹 페이지에 표시됩니다.
- 어떤 슬라이드를 표시해야 할지 결정하기 위해 slideIndex에 값을 더하거나 빼는 plusSlides 함수가 있습니다.
- 사용자가 버튼을 클릭하지 않으면 슬라이드는 3000밀리초마다 자동 스크롤됩니다.
사용자가 탐색 탭을 사용하는 경우, 이미지 슬라이더는 다음과 같이 작동합니다.
사용자가 탐색 버튼을 사용하지 않으면, 이미지 슬라이더는 3초마다 자동으로 스크롤됩니다.
이미지 슬라이더 테스트 및 디버깅
오류와 버그는 개발 과정에서 피할 수 없는 부분이며, 코드에 오류가 있다고 해서 나쁜 개발자라는 의미는 아닙니다. 위에서 설명한 단계를 따랐는데도 코드가 작동하지 않으면, 다음 테스트 및 디버깅 옵션을 통해 오류를 수정할 수 있습니다.
- 각 파일을 개별적으로 디버깅: 코드에는 HTML, CSS, JavaScript 세 가지 파일이 있습니다. 세 언어는 서로 다른 규칙을 가지고 있습니다. HTML 코드의 유효성은 W3C Markup Validation Service를 통해, CSS 코드는 CSS 유효성 검사기를 통해, JavaScript 코드는 Chrome DevTools를 사용해서 확인 할 수 있습니다.
- 다양한 테스트 유형 수행: 이미지가 올바르게 표시되는지 시각적 테스트를 수행하고, 이미지 반응성을 확인하기 위해 성능 테스트를 수행하고, 이미지 간의 탐색이 가능한지 기능 테스트를 수행할 수 있습니다.
- 다양한 이미지 형식과 크기로 테스트: 좋은 이미지 슬라이더는 다양한 이미지 형식과 크기에서 작동해야 합니다.
- 테스트 자동화: 자동화는 어디에나 있습니다. 테스트에서도 자동화의 이점을 누릴 수 있습니다. Selenium이나 LoadRunner 같은 도구를 사용하여 테스트 자동화 스크립트를 작성하고 실행할 수 있습니다. 이 도구를 사용하면 일부 테스트를 재사용할 수도 있습니다.
- 테스트 문서화: 테스트는 지속적인 과정입니다. 코드가 예상대로 작동할 때까지 계속해서 테스트를 개선해야 할 수 있습니다. 코드를 읽고 쉽게 참조할 수 있도록 이 과정을 문서화하십시오.
이미지 슬라이더 모범 사례
- 간단하게 유지하십시오: 슬라이더는 매력적이지만, 슬라이더에 너무 많은 이미지를 넣지 마십시오. 슬라이드당 4~7개의 이미지가 이상적입니다.
- 슬라이더 테스트: 온라인에 게시하기 전에 기능을 테스트하십시오.
- 반응형 슬라이더 제작: 만든 슬라이더가 다양한 화면 크기에 반응하는지 확인하십시오.
- 고품질 이미지 사용: 슬라이더에 고품질 이미지를 사용하십시오. SVG 형식으로 이미지를 저장하면 크기를 조정해도 품질이 저하되지 않습니다.
- 이미지 크기 조정: 이미지 크기와 형식이 다를 수 있습니다. 슬라이더의 모든 이미지가 항상 같은 크기인지 확인하십시오. CSS를 사용하면 이를 구현할 수 있습니다.
마무리
이제 UI 프레임워크 없이도 웹사이트에 중요한 정보를 보여주는 완벽한 이미지 슬라이더를 만들 수 있게 되었기를 바랍니다. 같은 방법을 사용해서 웹페이지에서 영상 슬라이더를 만들 수도 있습니다.