이미지 슬라이더에 이미지를 가로 또는 세로로 반전시키는 기능을 추가하는 방법을 살펴보겠습니다.

1. HTML

우선, HTML에서 이미지 슬라이더를 표시하는 부분을 찾아야 합니다. 일반적으로 <div> 태그나 클래스를 사용하여 이미지 슬라이더를 정의합니다. 다음은 간단한 예시입니다.

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <!-- 추가 이미지들... -->
</div>

2. CSS

다음으로, CSS를 사용하여 이미지를 가로 또는 세로로 반전시킬 수 있습니다.

/* 가로 반전 */
.slider img.flip-horizontal {
  transform: scaleX(-1);
}

/* 세로 반전 */
.slider img.flip-vertical {
  transform: scaleY(-1);
}

3. JavaScript

이미지를 반전시키는 동작을 토글하는 JavaScript 함수를 작성해야 합니다. 아래는 간단한 JavaScript 예시입니다.

function toggleFlip(image) {
  image.classList.toggle('flip-horizontal');
  // 또는
  // image.classList.toggle('flip-vertical');
}

4. HTML onclick 이벤트 추가

마지막으로, 이미지를 클릭했을 때 JavaScript 함수가 호출되도록 HTML에 이벤트를 등록해야 합니다.

<img src="image1.jpg" alt="Image 1" onclick="toggleFlip(this)">

이제 이미지 슬라이더에 이미지를 가로 또는 세로로 반전시키는 기능이 추가되었습니다. 원하는 이미지에 flip-horizontal 또는 flip-vertical 클래스를 추가하여 기능을 활용할 수 있습니다.

참고 자료

• CSS transform Property
• HTMLElement.classList