[JS] 이미지 비교 슬라이드(Image Comparison Slider)

1. 사용 방법

• 비교 할 이미지 2장을 HTML 내 추가 하여 줍니다.
  

  <div class="img left">
    <!-- 비교 이미지 1 -->	
    <img src="https://raw.githubusercontent.com/TTOWA/images/main/img_comparisonslider_1.png" alt="">
  </div>
  <div class="img right resize">
    <!-- 비교 이미지 2 -->
    <img src="https://raw.githubusercontent.com/TTOWA/images/main/img_comparisonslider_2.png" alt="">
  </div>​

• 비교 슬라이드 영역은 웹, 모바일(반응형)에서 사용 가능합니다.
  
  

 

참고 사이트 : before-after.js

GitHub - jotform/before-after.js: An Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/

 

이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.