# KTheme Slider Widget – Swiper 기반 강력한 슬라이더
들어가며
케이테마 프리미엄 Slider Widget은 Swiper.js 라이브러리 기반의 전문적인 슬라이더 위젯입니다. 이미지 슬라이더, 콘텐츠 슬라이더, 카드 슬라이더 등 다양한 형태로 활용할 수 있으며, 자동재생, 네비게이션, Pagination 등 모든 필수 기능을 제공합니다.
주요 기능
- Swiper.js 기반: 업계 표준 슬라이더 라이브러리
- Repeater 슬라이드: 원하는 만큼 슬라이드 추가
- 다양한 콘텐츠: 이미지, 텍스트, 버튼 조합
- 자동재생: 자동 슬라이드 전환
- 무한 루프: 끝없이 반복
- 네비게이션: 이전/다음 버튼
- Pagination: Dots, Bullets, Progress Bar
- 터치/스와이프: 모바일 제스처 지원
- 반응형 설정: 디바이스별 슬라이드 개수
각 슬라이드 구성
- 배경 이미지: 슬라이드 전체 배경 (선택 사항)
- 배경 오버레이: 이미지 위 어두운 레이어 (가독성)
- 제목: 슬라이드 제목 (HTML 지원)
- 설명: 슬라이드 내용 (HTML 지원)
- 버튼 1: 주요 CTA 버튼
- 버튼 2: 보조 버튼 (선택 사항)
- 콘텐츠 정렬: 좌, 중앙, 우
슬라이더 설정
기본 설정
슬라이드 개수 (반응형)
- 데스크톱: 1 ~ 6개 (기본: 1)
- 태블릿: 1 ~ 4개 (기본: 1)
- 모바일: 1 ~ 2개 (기본: 1)
간격
- Space Between: 슬라이드 사이 간격 (0 ~ 100px, 기본: 30px)
전환 속도
- Speed: 슬라이드 전환 속도 (300ms ~ 3000ms, 기본: 600ms)
자동재생
- 활성화: 예/아니요
- 지연 시간: 슬라이드 표시 시간 (1000ms ~ 10000ms, 기본: 3000ms)
- 호버 시 일시정지: 마우스 오버 시 자동재생 중지
- 사용자 상호작용 후: 드래그/클릭 후에도 자동재생 유지
무한 루프
- Loop: 마지막 슬라이드 후 첫 슬라이드로 자동 이동
- 자동재생과 함께 사용 시 끊김 없는 경험
네비게이션
- 표시/숨김: 이전/다음 버튼
- 위치: Inside (슬라이더 안쪽) / Outside (슬라이더 바깥쪽)
- 아이콘: FontAwesome 아이콘 선택 가능
- 색상: 버튼 색상 커스터마이징
Pagination
- 타입:
- Bullets (동그란 점)
- Fraction (1 / 5)
- Progress Bar (진행 막대)
- Custom (커스텀)
- 위치: Bottom (하단) / Top (상단)
- 색상: 활성/비활성 색상
- 클릭 가능: Pagination 클릭으로 이동
고급 설정
- 중앙 슬라이드: Centered Slides (중앙 슬라이드 강조)
- 자유 모드: Free Mode (자유롭게 드래그)
- Grab Cursor: 손 모양 커서
- 키보드 제어: 화살표 키로 이동
- 마우스휠: 스크롤로 슬라이드 이동
스타일 옵션
1. 슬라이드 스타일
배경
- 이미지 배경 또는 단색/그라디언트
- 배경 크기: Cover (권장), Contain
- 배경 위치: Center, Top, Bottom 등
오버레이
- 색상: rgba(0, 0, 0, 0.5) (반투명 검정)
- 텍스트 가독성 확보
높이
- Full Height: 화면 전체 높이 (100vh)
- Custom: 400px ~ 800px (기본: 600px)
2. 제목/설명 스타일
- Typography: 폰트, 크기, 굵기
- 색상: 텍스트 색상 (흰색 권장, 이미지 배경 시)
- Text Shadow: 가독성 향상
- 간격: Margin
3. 버튼 스타일
- Typography: 버튼 텍스트
- 배경색: 버튼 배경
- 텍스트 색상: 버튼 텍스트
- 호버 효과: 색상 변화
- Border Radius: 둥근 모서리
- 패딩: 버튼 크기
4. 네비게이션 스타일
- 색상: 버튼 색상
- 배경색: 버튼 배경 (선택 사항)
- 크기: 버튼 크기
- Border Radius: 둥근 모서리
- 호버 효과: 색상 변화
5. Pagination 스타일
- Bullet 색상: 비활성 상태
- Active 색상: 활성 상태
- 크기: Bullet 크기
- 간격: Bullets 사이 간격
실전 활용 예제
예제 1: 히어로 슬라이더 (Full Screen)
설정:
- 슬라이드 수: 3개
- 높이: Full Height (100vh)
- 배경: 고화질 이미지 (1920x1080px)
- 오버레이: rgba(0, 0, 0, 0.4)
- 제목: 큰 사이즈 (56px, Bold, 흰색)
- 설명: 중간 사이즈 (20px, 흰색)
- 버튼: 2개 (Primary + Outline)
- 콘텐츠 정렬: 중앙
- 자동재생: 5초
- 네비게이션: Inside, 흰색
- Pagination: Bullets, 하단, 흰색
예제 2: 콘텐츠 슬라이더 (멀티 슬라이드)
설정:
- 슬라이드 수: 6개
- 슬라이드 개수: 3개 동시 표시 (데스크톱)
- 높이: 400px
- 간격: 30px
- 배경: 단색 (카드 형태)
- 제목: 20px, Bold
- 설명: 14px, 짧은 텍스트
- 자동재생: 3초
- 무한 루프: 활성화
- 네비게이션: Outside
- Pagination: 없음
예제 3: 이미지 갤러리 슬라이더
설정:
- 슬라이드 수: 10개
- 높이: 600px
- 배경: 이미지만 (텍스트 없음)
- 오버레이: 없음
- 자동재생: 4초
- 무한 루프: 활성화
- 네비게이션: Inside, 큰 버튼
- Pagination: Progress Bar, 하단
- 터치/스와이프: 활성화
- 키보드 제어: 활성화
디자인 팁
히어로 슬라이더
- Full Height 사용
- 고화질 이미지 (최소 1920px 너비)
- 어두운 오버레이 (0.4 ~ 0.6)
- 흰색 텍스트
- 큰 제목 (48px 이상)
- 2개 버튼 (Primary + Secondary)
- 자동재생 5-7초
콘텐츠 슬라이더
- 3-4개 슬라이드 동시 표시
- 간격 20-30px
- 카드 형태 배경
- 간결한 텍스트
- 자동재생 3초
- 무한 루프 필수
이미지 갤러리
- 1개 슬라이드만 표시
- 이미지만 (텍스트 최소)
- 큰 네비게이션 버튼
- Progress Bar Pagination
- 터치/스와이프 강조
성능 최적화
- 이미지 최적화: WebP 포맷, 압축 (200KB 이하)
- Lazy Loading: 현재 슬라이드만 로드
- 슬라이드 수 제한: 10개 이하 권장
- 자동재생 지연: 3-5초 권장 (너무 빠르면 읽기 어려움)
호환성
- WordPress 5.0+
- Elementor 3.0+
- PHP 7.4+
- Swiper.js 8.0+
- 케이테마 프리미엄 플러그인 2.0+
- 모든 최신 브라우저 및 모바일 디바이스 지원
마무리
KTheme Slider Widget은 Swiper.js 기반의 강력하고 유연한 슬라이더 솔루션입니다. 히어로 섹션, 콘텐츠 쇼케이스, 이미지 갤러리 등 다양한 용도로 활용하여 동적이고 인터랙티브한 웹사이트를 구축하세요!