엘리멘터에는 Swiper 라이브러리가 내장되어 있으며 Image Carousel과 같은 특정 위젯을 사용하게 되면 로드됩니다. 이 템플릿은 위젯을 사용하지 않고도 슬라이드나 캐러셀을 구현할 수 있도록 Swiper 모듈을 활용하는 예시 템플릿입니다.
핵심 레이어
핵심 레이어는 🚀 Settings - jetcraft-section-swiper-01 레이어와 🚀 jetcraft-section-swiper-01 입니다. 원하는 페이지나 템플릿에 이 레이어를 복사해서 붙여 넣습니다.
구조
컨테이너 구조는 Swiper 공식 문서에서 제공하는 HTML 구조와 동일하지만 약간의 차이가 있습니다. 본래는 Navigation과 Pagination 요소가 .swiper 요소 내부에 위치하지만 이 템플릿에서는 외부에 위치합니다.
Navigation과 Pagination 요소가 .swiper 요소 내부에 위치하게 되면 overflow: hidden 속성의 영향을 받아 포지셔닝에 제약을 받기 때문입니다.
Settings 레이어 코드 설명
🚀 Settings - jetcraft-section-swiper-01 레이어의 코드에 대해 간략히 설명합니다.
7 – 16 라인
Swiper와 엘리멘터 빌더에서 미리 명시해 놓은 지역 변수를 오버라이드 합니다. Navigation과 Pagination 요소에 대한 색상, 크기, 간격 등 기본적인 설정을 변경할 수 있습니다.
18 – 30 라인
이 템플릿에서 생성한 Swiper 인스턴스에 대한 개별 스타일입니다. .jetcraft-section-swiper-01 .swiper { height: 300px; } 부분은 슬라이드 높이에 대한 기본값이며, 실제 슬라이드의 높이를 변경할 때는 레이어 이름이 swiper인 컨테이너의 Min Height 값을 변경합니다. (필드 값으로 305px이 설정되어 있습니다)
39 -108 라인
자바스크립트 코드는 Swiper가 편집 화면에서도 작동하도록 작성되었습니다. 85 – 90 라인에서 생성한 인스턴스는 실제 라이브 서비스에서 인스턴스를 생성하고, 92 – 106 라인에서 생성한 인스턴스는 편집 화면에서만 인스턴스를 생성합니다.
110 라인
엘리멘터는 기본적으로 모든 페이지에서 Swiper 모듈에 대한 CSS 파일을 로드하기 때문에 별도로 스크립트 파일만 불러오면 됩니다.
사실 <script> 태그를 사용해서 Swiper 스크립트를 호출하는 것은 중복 호출의 가능성이 있습니다. 예를들어, 한 페이지에서 이미 Swiper 기능이 내장 된 캐러셀 위젯을 사용하고 있는 경우가 그러합니다.
그래서 엘리멘터 공식 블로그에서 제공하는 방법을 사용하는 것이 가장 바람직하지만, 그동안 여러번의 업데이트를 통해 함수명이 바뀌거나 기능이 아예 흡수통합 되어 제대로 작동하지 않습니다.
제공하지도 않는 변경 코드를 일일이 추적할 수 없어 Jetcraft에서는 단순히 <script> 태그 호출을 사용했습니다. 만일 동일한 페이지에서 이미 Swiper가 호출되어 있다면 110 라인을 주석 처리하거나, 처음부터 해당 라인을 삭제 후 호출이 필요한 페이지에서만 추가하세요.