5 개의 무료 이미지 비교 슬라이더 스크립트

겹쳐 진 슬라이더를 사용하면 일반적으로 두 종류의 이미지가 서로 겹쳐진 두 종류의 이미지를 비교할 수 있습니다. 조작 할 수있는 슬라이더는 이전 이미지와 이후 이미지를 표시하기 위해 사용자가 드래그 할 수 있으며 그 반대의 경우도 가능합니다..

화성 대기의 거친 영향이나 도시 풍경이 반세기 동안 어떻게 변하는 지와 같은 특정 시나리오의 경우 완벽한 방법입니다.

디자이너의 경우 원본 이미지에 대한 기법이나 접근 방식의 변화량을 반영하는 좋은 방법이기도합니다. 비교 목적으로 사용할 수있는 다양한 JS 라이브러리가 있습니다. 여기에 5 개가있다..

스물 두 개

스물 두 개 두 이미지 간의 차이점을 쉽게 기록 할 수있는 시각적 도구입니다. 이 도구는 jQuery와 jquery.event.move를 사용하여 작업합니다. 사용하기가 매우 쉽습니다. 두 개의 이미지를 컨테이너에 쌓은 다음 호출하십시오. 스물 둘째 (); 컨테이너 용.

그때:

 $ ( "# container"). twentytwenty (); 

Twentytwenty는 반응 형이며 모든 장치에서 작동합니다. Foundation 프레임 워크를 사용하면이 기능이 기본적으로 작동합니다.

나란히 하다

나란히 하다 두 가지 미디어 (사진 또는 GIF)를 비교하고 시간 경과에 따른 이미지 간 변경 사항을 쉽게 강조 표시 할 수 있습니다. 이 플러그인은 사용하기 쉽고 모든 장치에서 작동합니다. 두 개의 이미지를 제공 한 다음 사용 가능한 옵션으로 플러그인을 호출하십시오..

옵션에서 슬라이더 시작 위치를 설정하고, 세로 또는 가로로 설정하고, 레이블 및 신용, 애니메이션 등을 추가 할 수 있습니다.

아래에서 데모를보십시오 :

imgSlider

imgSlider 이미지 비교 슬라이더를 만드는 간단한 jQuery 플러그인입니다. 사용법은 간단합니다. JS 및 CSS를 포함시킨 후 div의 이미지를 왼쪽 클래스 전에 이미지 및 권리 클래스 후 이미지를 클릭 한 다음 호출하여 활성화하십시오. .슬라이더 ();. 플러그인의 옵션에는 슬라이더의 초기 위치 설정, 슬라이더에 명령 추가 / 표시 등이 있습니다..

플러그인 호출 :

 $ ( '. 슬라이더'). 슬라이더 (); 

코코 엔

코코 엔 jQuery-Touch 이벤트를 사용하여 터치 할 수 있습니다. 비슷한 HTML 구조로 인해 적용하기 쉽습니다. 스물 두 개 플러그인. 스크립트 스택에서 jQuery 외에도이 플러그인과 함께 jQuery Touch 이벤트 라이브러리를 포함해야합니다..

 
   
 $ (document) .ready (function () $ ( '. cocoen'). 코코 엔 (););

아래에서 데모를보십시오 :

이미지 비교 슬라이더

CodyHouse는 드래그 이벤트를 처리하고 모바일 지원을 추가하기 위해 CSS3, jQuery 및 일부 스크립트로 이미지 비교 슬라이더의 데모를 만들었습니다. 이 플러그인을 사용하는 방법에 대한 전체 설명과 지침을 여기서 따를 수 있으며 여기에서 데모를 볼 수 있습니다..

아래에서 데모를보십시오 :

다음은 3 가지입니다.

카토 - 다른 플러그인은 종속성으로 jQuery를 필요로하지만 카토 종속성이 없어 작업 할 수 있으므로 이미지 비교 슬라이더를위한 더 가벼운 라이브러리로 만듭니다. 사용법은 간단합니다. Cato의 CSS 및 JS 라이브러리를 포함하고 HTML 구조를 따르십시오..

툴팁 추가, 슬라이더 방향 변경, 세피아 및 그레이 스케일과 같은 필터 효과 추가 등 슬라이더에 적용 할 수있는 옵션이 있습니다. 그러나 Cato는 현재 WebKit 만 지원합니다..

전 후 - 가볍고 반응이 뛰어나며 모든 레이아웃과 크기에서 작동합니다. Codepen에서 라이브 데모를 볼 수 있습니다..

HTML5 비디오 비교 슬라이더 - 다른 개발자가 이미지 비교 슬라이더를 만들려고 할 때 Dudley Store는 슬라이더를 비디오에 적용합니다. 작업을하기 위해 그는 jQuery와 몇 줄의 코드를 사용합니다. 액션을 보려면 Codepen의 데모를보십시오..