[javascript] 이미지 슬라이더에 오른쪽/왼쪽 화살표 버튼 추가하기

12 Dec 2023

javascript

이미지 슬라이더에 오른쪽/왼쪽 화살표 버튼을 추가하는 것은 사용자가 이미지를 더 쉽게 탐색할 수 있도록 도와줍니다. 일반적으로 이미지 슬라이더에 버튼을 추가하기 위해서 HTML, CSS, JavaScript를 사용합니다.

1. HTML

먼저 HTML 파일에서 이미지 슬라이더를 포함하는 부분에 버튼 요소를 추가합니다.

<div class="slider-container">
  <button id="prevButton">이전</button>
  <div class="slider">
    <img src="image1.jpg" alt="이미지 1">
    <img src="image2.jpg" alt="이미지 2">
    <img src="image3.jpg" alt="이미지 3">
    <!-- 이미지들 -->
  </div>
  <button id="nextButton">다음</button>
</div>

2. CSS

버튼에 스타일을 적용하여 디자인을 꾸밉니다.

#prevButton, #nextButton {
  background-color: #f2f2f2;
  color: #333;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

#prevButton:hover, #nextButton:hover {
  background-color: #e6e6e6;
}

3. JavaScript

버튼을 클릭했을 때 슬라이더를 업데이트하는 JavaScript 코드를 추가합니다.

document.getElementById('prevButton').addEventListener('click', function() {
  // 이전 이미지로 슬라이드
});

document.getElementById('nextButton').addEventListener('click', function() {
  // 다음 이미지로 슬라이드
});

위의 코드에서는 이미지 슬라이더의 오른쪽, 왼쪽 화살표 버튼을 추가하고 클릭 이벤트를 통해 이미지를 전환하는 방법을 소개했습니다. 실제 프로젝트에 이 기능을 구현할 때는 라이브러리나 프레임워크를 활용하여 더욱 다양한 기능을 추가할 수 있습니다.

1. HTML

2. CSS

3. JavaScript

참고 자료