Front End/Javascript

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

TTOWA 2022. 1. 10. 18:33

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/

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

github.com

 

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

 

 

 

반응형