이번에는 PhotoSwipe와 함께 이미지 슬릭 슬라이더를 구현하는 방법에 대해 알아보겠습니다. PhotoSwipe는 모바일 및 데스크톱에서 사용할 수 있는 JavaScript 기반의 이미지 및 동영상 갤러리 라이브러리입니다. 스와이프 제스처, 핀치 줌 등의 기능을 지원하여 멋진 갤러리 환경을 제공합니다.
사전 준비
먼저, PhotoSwipe를 사용하기 위해 필요한 파일을 다운로드하고 프로젝트에 추가하여야 합니다. 다음은 필요한 파일들의 링크입니다:
위 파일들을 다운로드한 후, 프로젝트 디렉토리에 추가합니다.
HTML 마크업 구조
이미지 슬릭 슬라이더를 구현하기 위해 먼저 HTML 마크업 구조를 만들어주어야 합니다. 예시로 3개의 이미지를 슬라이더로 구성하도록 하겠습니다.
<div class="slider-wrapper">
<div class="slider">
<div class="slide" data-index="0">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide" data-index="1">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide" data-index="2">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
</div>
위 마크업은 슬라이더를 감싸는 .slider-wrapper와 실제 슬라이드가 포함된 .slider로 구성되어 있습니다. 각각의 슬라이드는 .slide 클래스와 data-index 속성을 가지고 있으며, data-index는 각 슬라이드의 인덱스를 나타냅니다.
스타일링
다음으로, 슬라이더를 스타일링해주어야 합니다. PhotoSwipe는 CSS 클래스를 통해 각각의 요소를 스타일링할 수 있도록 지원합니다.
/* 슬라이더 컨테이너 스타일 */
.slider-wrapper {
position: relative;
width: 100%;
height: 100%;
}
/* 슬라이드 영역 스타일 */
.slider {
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.slide {
width: 100%;
scroll-snap-align: center;
}
/* 갤러리 스킨 스타일 */
/* ※ 필요한 경우, 'default-skin.css'의 스타일을 수정해야 함 */
/* 모바일에서 불필요한 막대 숨기기 */
.slider::-webkit-scrollbar {
display: none;
}
위 CSS 코드는 슬라이더 컨테이너와 슬라이드 영역의 스타일을 지정하고 있습니다. 또한, 모바일에서는 스크롤바를 숨기도록 설정하였습니다.
PhotoSwipe 초기화
이제 PhotoSwipe 라이브러리를 초기화하고 슬라이더와 연동해주어야 합니다.
var gallery;
// 슬라이드 클릭 시 PhotoSwipe 열기
document.querySelectorAll('.slide').forEach(function (slide) {
slide.addEventListener('click', function () {
var index = parseInt(slide.getAttribute('data-index'));
var options = {
index: index,
bgOpacity: 0.8,
showHideOpacity: true
};
gallery = new PhotoSwipe(document.querySelector('.pswp'), PhotoSwipeUI_Default, items, options);
gallery.init();
});
});
// PhotoSwipe UI 요소를 포함한 DOM 요소 추가
var pswpElement = document.querySelectorAll('.pswp')[0];
document.body.appendChild(pswpElement);
위 JavaScript 코드는 각 슬라이드에 클릭 이벤트를 등록하여 해당 슬라이드의 인덱스를 가져오고, 해당 인덱스를 기반으로 PhotoSwipe를 초기화합니다. options 객체를 통해 갤러리의 옵션을 설정할 수 있으며, bgOpacity와 showHideOpacity는 예시로 설정한 옵션입니다.
마무리
여기까지 PhotoSwipe와 연동하여 이미지 슬릭 슬라이더를 구현하는 방법에 대해 알아보았습니다. PhotoSwipe의 다양한 기능과 스와이프 제스처, 핀치 줌 등의 사용자 친화적인 환경을 활용하여 멋진 이미지 갤러리를 구현해보세요!