Before & After Slider는 두 이미지를 드래그로 비교할 수 있는 모바일 기반 슬라이더입니다. 핸들 스타일, 라벨 위치, 이미지 필터, 인터랙션 방식 등 거의 모든 요소를 세밀하게 조절할 수 있어요. 프로젝트 성격에 맞는 완성도 높은 결과물을 만들 수 있습니다.

주요 기능

두 가지 라벨 방식

스태틱 라벨은 원하는 위치에 자유롭게 배치하고, 스티키 라벨은 핸들에 고정해 인터랙티브하게 표현할 수 있어요.

라벨 스타일 완전 제어

폰트, 색상, 배경, 테두리, 패딩, 필터 등 모든 텍스트 요소를 커스터마이징할 수 있어요. 드래그 시 페이드 아웃/인 효과도 포함돼요.

이미지 필터와 페이드 효과

각 이미지에 CSS 필터(흐림, 흑백, 세피아 등)를 개별 적용할 수 있고, 로드 시 부드러운 페이드 인 애니메이션도 설정할 수 있어요.

핸들 및 슬라이더 인터랙션 제어

핸들 크기, 아이콘 색상, 드래그 바 길이, 그림자 등 디테일한 핸들 스타일 조정이 가능하며, 키보드 조작, 리셋, 호버 반응 등 사용자 행동에 따른 반응도 설정할 수 있어요.

컨테이너 커스터마이징

프레임 테두리, 그림자, 패딩 등 전체 컴포넌트 스타일을 자유롭게 조정할 수 있어요.

추가 설명

• 뷰티, 제품 리디자인, 이노베이션, 의학 이미지 비교 등 모든 산업 분야에 적용할 수 있어요.

• react-compare-slider기반으로 제작되어 성능도 뛰어나고 안정적이에요.