[JS] 모던한 이미지 슬라이더 구현하기

0
[JS] 모던한 이미지 슬라이더 구현 핵심 정리

모던한 이미지 슬라이더

이미지 슬라이더 메인 화면

최근 작업하면서 이미지 슬라이더를 다시 만들 일이 있었는데, 라이브러리를 쓰기에는 오히려 불필요한 옵션이 많고, 그렇다고 단순하게 만들기엔 디자인적으로 아쉬운 부분이 많더라고요. 그래서 오늘은 모던하고 심플한 이미지 슬라이더를 만들어볼까합니다.

1) 슬라이더의 기본 구조

핵심은 단순합니다. 슬라이더 컨테이너 안에 이미지 리스트를 가로로 배치하는 구조예요.

<div class="slider"> <div class="track"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div> </div>
  • 핵심은 .track 요소를 `display:flex`로 두고 가로로 나열하는 점입니다.
  • 이 구조가 잡히면 이동은 단순히 transform: translateX()로 해결됩니다.
  • 이미지 왼쪽 하단에는 이미지 제목이 오도록 하였습니다.
  • 이미지를 이동할 수 있는 버튼은 이미지 가운데 양 옆에 위치하도록 하였습니다.
  • 이미지 하단에는 현재 이미지 위치를 알 수 있도록 점을 추가하였습니다.

2) 부드러운 이동을 위한 핵심 CSS

.track{ display:flex; transition: transform 0.35s ease; }

사실 CSS는 이것만 있으면 충분합니다. 슬라이더의 부드러운 전환은 대부분 이 transition 한 줄이 맡아요.

3) 실제 이동 로직 (핵심 JS만)

이미지 슬라이더 실행 영상 화면
function goTo(i){ current = (i + slides.length) % slides.length; updateUI(); resetAutoplay(); } function updateUI(){ const slide = slides[current]; mainImg.src = slide.src; caption.textContent = slide.title; document.querySelectorAll('.thumb-row .mini').forEach((el, idx) => { el.classList.toggle('active', idx === current); }); document.querySelectorAll('.dot').forEach((d, idx) => { d.classList.toggle('active', idx === current); }); }

이미지 슬라이더의 양 옆 버튼을 눌렀을 때 current값을 하나씩 증가하거나 감소시키면서 이미지를 이동합니다.
이미지들의 src와 title이 들어있는 배열(총 4개)에서 현재 이미지(slides[current])를 가져옵니다.
썸네일과 하단 네비게이션(도트)도 현재 위치 index 값을 통해 현재 위치로 이동합니다.

4) 자동 재생 로직

이미지 슬라이더를 처음 시작했을 때 자동 재생을 시작합니다.
setInterval()를 사용하여 Delay만큼 기다렸다가 이미지가 자동으로 이동하게끔 합니다.
사용자가 이미지 이동 버튼을 눌렀을 경우 자동 재생을 초기화해줍니다.
이 때 clearInterval()를 사용합니다.

function startAutoplay(){ autoplayTimer = setInterval(next, AUTO_DELAY); } function resetAutoplay(){ if(autoplayTimer) clearInterval(autoplayTimer); startAutoplay(); }

5) 썸네일과 네비게이션 도트

function buildUI() { slides.forEach((s, i) => { const mini = document.createElement('button'); mini.className = 'mini'; mini.setAttribute('aria-label', 'slide-' + (i + 1)); mini.innerHTML = `<img src="${s.src}" alt="${s.title}">`; mini.addEventListener('click', () => goTo(i)); thumbRow.appendChild(mini); const dot = document.createElement('div'); dot.className = 'dot'; dot.addEventListener('click', () => goTo(i)); dotsWrap.appendChild(dot); }); updateUI(); }

이미지 수만큼 반복문을 돌면서 하단 썸네일과 네비게이션을 만들어줍니다.
사용자가 썸네일을 클릭했을 때 해당 이미지로 이동을 위해서 setAttribute를 활용하여 이미지 슬라이드에 번호를 부여해줍니다.
클릭 함수는 기존에 만들었던 goTo(i) 함수를 사용합니다.
네비게이션 도트도 마찬가지로 goTo(i) 함수를 사용합니다.
HTML 코드 내에서 만들어도 상관없지만, 이미지가 늘어나거나 줄어들 경우가 있으므로, JS 코드로 동적으로 생성해주는게 더 좋은 방법입니다.

6) 왜 이렇게 구성했는가?

직접 프로젝트에서 디자인을 바꾸거나, 애니메이션 강도를 조절할 때도 이 구조가 가장 단순하고 안정적입니다.

7) 더욱 확장해나갈 점

  • 슬라이드 전환을 페이드(fade) 로 바꾸기
  • 이미지 클릭시 확대해서 보이기
  • 화살표 클릭시 애니메이션 추가
웹페이지를 만들거나 작업을 할 때면 가끔씩 이미지 슬라이더가 필요하곤 합니다. 기존에 만들어진 많은 슬라이더 라이브러리들이 있지만, 자신이 직접 만들어 사용하면 더 좋은 것 같습니다. 공부가 되는 것 뿐만아니라 코드를 수정하거나 확장할 일이 생겼을 때 용이하기 때문입니다.

미니 프로젝트들

스톱워치 룰렛 뽑기 게임 숫자 야구 게임 Mini Paint App To-do List 사다리 게임 횡스크롤 게임 같은 그림 찾기 게임
Tags

댓글 쓰기

다음 이전