CSS Flexbox와 약간의 JavaScript를 함께 사용하면 끝없이 흐르는 무한 스크롤 슬라이더를 손쉽게 구현할 수 있습니다. 이 글에서는 이전·다음 버튼으로 이미지를 넘기는 캐러셀과, CSS 애니메이션만으로 자동 재생되는 배너 슬라이더 두 가지 예제를 소개합니다.
예제 1: 버튼으로 조작하는 이미지 캐러셀
아래 예제는 좌우 화살표 버튼을 클릭해 이미지를 앞뒤로 전환하는 기본적인 캐러셀입니다. 마지막 이미지에서 다음 버튼을 누르면 다시 첫 번째 이미지로 돌아가 순환(loop) 구조를 이룹니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
.container {
max-width: 600px;
position: relative;
margin: 6% auto;
}
.prevbtn, .nextbtn {
position: absolute;
top: 50%;
padding: 12px;
margin-top: -20px;
color: white;
font-weight: bold;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 50%;
}
.prevbtn:hover, .nextbtn:hover {
background-color: darkgrey;
color: rgb(0,0,0);
}
.nextbtn {
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="slide">
<img src="https://images.unsplash.com/photo-1609517904792-bac493d55556?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1609883475382-c4c9378569e5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1611094607507-8c8173e5cf33?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<a class="prevbtn" onclick="changeSlide(-1)">❮</a>
<a class="nextbtn" onclick="changeSlide(1)">❯</a>
</div>
<script>
let slideIndex = [1,1];
viewSlides(1);
function changeSlide(n) {
viewSlides(slideIndex[0] += n);
}
function viewSlides(n) {
let ele = document.getElementsByClassName("slide");
if (n > ele.length) {
slideIndex[0] = 1
}
if (n < 1) {
slideIndex[0] = ele.length
}
for (i = 0; i < ele.length; i++) {
ele[i].style.display = "none";
}
ele[slideIndex[0]-1].style.display = "block";
}
</script>
</body>
</html>이 코드의 동작 원리는 다음과 같습니다.
- 슬라이드 인덱스 관리: slideIndex 배열이 현재 표시 중인 슬라이드의 위치를 저장합니다.
- 순환 처리: 인덱스가 슬라이드 개수를 초과하면 첫 번째로, 1보다 작아지면 마지막으로 되돌려 무한 반복이 가능합니다.
- 표시 전환: 모든 슬라이드를 display: none으로 숨긴 뒤, 현재 인덱스에 해당하는 슬라이드만 display: block으로 보여줍니다.
위 코드를 실행하면 아래와 같은 화면을 볼 수 있습니다.
예제 2: CSS 애니메이션으로 자동 재생되는 무한 슬라이더
두 번째 예제는 JavaScript 없이 @keyframes 애니메이션만으로 배경 이미지가 계속 흐르는 무한 슬라이더를 구현한 것입니다. translateX 값을 일정 비율씩 이동시키고 linear와 infinite 옵션을 적용해 끊김 없는 루프를 완성합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 120px;
max-width: 600px;
margin: 12px auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
border: 4px ridge rgba(20,30,240,0.6);
}
.container > div {
height: 120px;
width: 2400px;
background: url(https://images.unsplash.com/photo-1611485916153-fce531587fe0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb-1.2.1&q=80&w=120);
position: absolute;
height: 100%;
transform: translate3d(0, 0, 0);
}
.container .slider {
animation: slideshow 20s linear infinite;
}
@keyframes slideshow {
100% {
transform: translateX(-33.33%);
}
}
</style>
</head>
<body>
<div class="container">
<div class="slider"></div>
</div>
</body>
</html>핵심 포인트를 정리하면 다음과 같습니다.
- overflow: hidden: 컨테이너 밖으로 벗어나는 이미지 영역을 잘라내어 한 화면에 슬라이더처럼 보이도록 합니다.
- translate3d 활용: GPU 가속을 활용해 부드러운 애니메이션 성능을 확보합니다.
- infinite 루프: 20초 동안 선형(linear)으로 이동한 뒤 처음 상태로 되돌아가는 과정이 무한히 반복됩니다.
실행 결과는 아래와 같습니다.
마무리
이처럼 CSS Flexbox와 간단한 JavaScript 또는 @keyframes 애니메이션만으로 외부 라이브러리 없이도 캐러셀과 무한 슬라이더를 구현할 수 있습니다. 프로젝트 성격에 따라 버튼 조작 방식과 자동 재생 방식을 조합하면 더욱 완성도 높은 UI를 만들 수 있습니다.