'this' 키워드를 이용한 자바스크립트 이미지 슬라이더 구현 방법

18 Sep 2023

javascript

이미지 슬라이더는 웹 페이지에서 많이 사용되는 기능 중 하나입니다. 이번 글에서는 ‘this’ 키워드를 이용하여 자바스크립트를 사용하여 이미지 슬라이더를 구현하는 방법을 알아보겠습니다.

HTML 구조

먼저 HTML 구조를 작성하겠습니다. 이미지를 담을 컨테이너와 이전 및 다음 버튼을 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Slider</title>
</head>
<body>
  <div class="slider-container">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <button id="prev-btn">Previous</button>
  <button id="next-btn">Next</button>

  <script src="slider.js"></script>
</body>
</html>

CSS 스타일

이미지 슬라이더에 스타일을 적용하기 위해 CSS를 작성합니다.

.slider-container {
  max-width: 500px;
  margin: 0 auto;
}

.slider-container img {
  width: 100%;
  height: auto;
}

button {
  margin-top: 10px;
}

자바스크립트 구현

이미지 슬라이더의 동작을 위해 자바스크립트를 구현합니다. ‘this’ 키워드를 사용하여 클릭된 버튼의 이전 또는 다음 sibling 이미지로 이동하는 기능을 추가합니다.

// 이미지 슬라이더 구현
const sliderContainer = document.querySelector('.slider-container');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

let currentImage = document.querySelector('.slider-container img');

prevBtn.addEventListener('click', function() {
  currentImage = currentImage.previousElementSibling || sliderContainer.lastElementChild;
  currentImage.style.display = 'block';

  const nextImage = currentImage.nextElementSibling || sliderContainer.firstElementChild;
  nextImage.style.display = 'none';
});

nextBtn.addEventListener('click', function() {
  currentImage.style.display = 'none';

  currentImage = currentImage.nextElementSibling || sliderContainer.firstElementChild;
  currentImage.style.display = 'block';
});

이제 자바스크립트 코드를 slider.js 파일에 저장하고 HTML 파일에 스크립트를 포함시켰습니다.

마치며

이번 글에서는 ‘this’ 키워드를 이용하여 자바스크립트 이미지 슬라이더를 구현하는 방법을 알아보았습니다. 이를 응용하여 다양한 슬라이더 기능을 추가하거나 디자인을 변경할 수 있습니다. ‘this’ 키워드를 이용한 자바스크립트의 강력한 기능을 활용하여 다양한 웹 프로젝트에 적용해 보세요.

#javascript #이미지슬라이더 #웹개발