CSS와 JavaScript만으로도 화면 크기에 맞춰 자동으로 조절되는 반응형 슬라이드쇼를 손쉽게 구현할 수 있습니다. 이번 글에서는 이전·다음 화살표 버튼과 하단 내비게이션 도트까지 갖춘 완성형 슬라이드쇼를 예제 코드와 함께 단계별로 살펴보겠습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
.Slide {
display: none;
}
img {
vertical-align: middle;
width: 100%;
height: 400px;
}
.slideContainer {
max-width: 600px;
position: relative;
margin: auto;
}
.prevBtn,
.nextBtn {
position: absolute;
top: 50%;
width: auto;
padding: 10px;
background-color: rgb(255, 255, 75);
color: rgb(50, 0, 116);
font-weight: bolder;
font-size: 18px;
}
.nextBtn {
right: 0;
}
.Caption {
color: #fbff09;
font-weight: bold;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.Navdot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: rgb(54, 5, 117);
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.selected,
.Navdot:hover {
background-color: #d9ff00;
}
@media only screen and (max-width: 450px) {
.prevBtn,
.nextBtn,
.Caption {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="slideContainer">
<div class="Slide">
<img src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
<div class="Caption">사진 1</div>
</div>
<div class="Slide">
<img src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
<div class="Caption">사진 2</div>
</div>
<div class="Slide">
<img src="https://images.unsplash.com/photo-1584910758141-f7993f9e203d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80" />
<div class="Caption">사진 3</div>
</div>
<a class="prevBtn">❮</a>
<a class="nextBtn">❯</a>
</div>
<br />
<div style="text-align:center">
<span class="Navdot" onclick="currentSlide(1)"></span>
<span class="Navdot" onclick="currentSlide(2)"></span>
<span class="Navdot" onclick="currentSlide(3)"></span>
</div>
<script>
document.querySelector(".prevBtn").addEventListener("click", () => {
changeSlides(-1);
});
document.querySelector(".nextBtn").addEventListener("click", () => {
changeSlides(1);
});
var slideIndex = 1;
showSlides(slideIndex);
function changeSlides(n) {
showSlides((slideIndex += n));
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("Slide");
var dots = document.getElementsByClassName("Navdot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
Array.from(slides).forEach(item => (item.style.display = "none"));
Array.from(dots).forEach(
item => (item.className = item.className.replace(" selected", ""))
);
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " selected";
}
</script>
</body>
</html>
코드 핵심 설명
1. HTML 구조
.slideContainer는 슬라이드 전체를 감싸는 컨테이너 역할을 합니다. 그 안의 각 .Slide 요소는 하나의 이미지와 캡션(.Caption)으로 구성되며, 좌우 화살표 버튼(.prevBtn, .nextBtn)과 하단의 원형 도트(.Navdot)가 함께 배치되어 있습니다.
2. CSS 스타일링
반응형 구현의 핵심은 img 태그에 적용된 width: 100%입니다. 이 설정 덕분에 이미지가 부모 컨테이너의 너비에 맞춰 자동으로 확대·축소됩니다. 또한 미디어 쿼리(@media)를 활용해 화면 너비가 450px 이하인 모바일 환경에서는 버튼과 캡션의 글자 크기를 16px로 줄여 작은 화면에서도 가독성을 유지하도록 했습니다.
3. JavaScript 동작
changeSlides() 함수는 이전·다음 버튼을 클릭할 때 슬라이드 인덱스를 앞뒤로 이동시키고, currentSlide() 함수는 하단 도트를 클릭했을 때 해당 번호의 슬라이드로 바로 이동합니다. showSlides() 함수는 인덱스가 범위를 벗어나면 첫 번째 또는 마지막 슬라이드로 순환되도록 처리한 뒤, 모든 슬라이드를 숨기고 현재 슬라이드만 화면에 표시하며 일치하는 도트에 'selected' 클래스를 추가해 강조 효과를 줍니다.
실행 결과
위 코드를 브라우저에서 실행하면 아래와 같이 좌우 버튼과 하단 도트로 조작할 수 있는 반응형 슬라이드쇼가 완성됩니다.
응용 팁
슬라이드를 더 추가하고 싶다면 .Slide 요소와 .Navdot 도트를 같은 개수만큼 복제하고, currentSlide() 호출 시 번호만 늘려주면 됩니다. 자동 재생 기능이 필요하다면 setInterval()로 changeSlides(1)를 일정 간격으로 호출하는 방식으로도 손쉽게 확장할 수 있습니다.