SEARCH

검색 목록
가격
가격
~
사이즈
사이즈
색상
색상
결과 내 재검색
결과 내 재검색
초기화

확대보기

확대/축소 4
현재 위치
home /┗ 여행 캐리어(종류별) /Prestige Luggage
Prestige Luggage
total 63 items
검색결과 정렬
1
/* ========================================== HEYS NEW LEOPARD BENEFIT SLIDER PC DRAG + MOBILE SWIPE ========================================== */ (function () { "use strict"; function initHeysBenefitSlider() { // 혜택 이벤트 영역만 찾기 var section = document.getElementById( "heys-benefit-event" ); if (!section) return; // 중복 실행 방지 if (section.getAttribute("data-benefit-ready") === "1") { return; } var slider = section.querySelector( ".heys-benefit-slider" ); var cards = Array.prototype.slice.call( section.querySelectorAll(".heys-benefit-card") ); var dots = Array.prototype.slice.call( section.querySelectorAll( ".heys-benefit-pagination button" ) ); var prevButton = section.querySelector( ".heys-benefit-prev" ); var nextButton = section.querySelector( ".heys-benefit-next" ); if (!slider || !cards.length) return; section.setAttribute("data-benefit-ready", "1"); var currentIndex = 0; var isDragging = false; var hasMoved = false; var startX = 0; var startScrollLeft = 0; var scrollTicking = false; function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } // 현재 가운데 위치에 가장 가까운 카드 찾기 function getNearestIndex() { var sliderRect = slider.getBoundingClientRect(); var sliderCenter = sliderRect.left + sliderRect.width / 2; var nearestIndex = 0; var minimumDistance = Infinity; cards.forEach(function (card, index) { var rect = card.getBoundingClientRect(); var cardCenter = rect.left + rect.width / 2; var distance = Math.abs(cardCenter - sliderCenter); if (distance < minimumDistance) { minimumDistance = distance; nearestIndex = index; } }); return nearestIndex; } // 하단 페이지 표시 function updatePagination() { dots.forEach(function (dot, index) { var active = index === currentIndex; dot.classList.toggle("active", active); dot.setAttribute( "aria-current", active ? "true" : "false" ); }); // 맨 앞/맨 뒤 화살표 상태 if (prevButton) { prevButton.disabled = currentIndex === 0; } if (nextButton) { nextButton.disabled = currentIndex === cards.length - 1; } } // 선택한 카드를 가운데로 이동 function goToCard(index, smooth) { currentIndex = clamp( index, 0, cards.length - 1 ); var card = cards[currentIndex]; var sliderRect = slider.getBoundingClientRect(); var cardRect = card.getBoundingClientRect(); var target = slider.scrollLeft + cardRect.left - sliderRect.left - (slider.clientWidth - card.clientWidth) / 2; slider.scrollTo({ left: target, behavior: smooth === false ? "auto" : "smooth" }); updatePagination(); } // 이전 카드 if (prevButton) { prevButton.addEventListener("click", function () { goToCard(currentIndex - 1); }); } // 다음 카드 if (nextButton) { nextButton.addEventListener("click", function () { goToCard(currentIndex + 1); }); } // 하단 페이지 표시 클릭 dots.forEach(function (dot, index) { dot.addEventListener("click", function () { goToCard(index); }); }); // PC 마우스 드래그 시작 slider.addEventListener("pointerdown", function (event) { if ( event.pointerType !== "mouse" || event.button !== 0 ) { return; } isDragging = true; hasMoved = false; startX = event.clientX; startScrollLeft = slider.scrollLeft; slider.style.scrollBehavior = "auto"; slider.style.scrollSnapType = "none"; slider.style.cursor = "grabbing"; slider.setPointerCapture(event.pointerId); }); // PC 드래그 중 카드 이동 slider.addEventListener("pointermove", function (event) { if (!isDragging) return; var difference = event.clientX - startX; if (Math.abs(difference) > 5) { hasMoved = true; } slider.scrollLeft = startScrollLeft - difference; }); // 드래그 종료 function endDrag() { if (!isDragging) return; isDragging = false; slider.style.cursor = "grab"; slider.style.scrollBehavior = "smooth"; currentIndex = getNearestIndex(); // 가장 가까운 카드로 자동 정렬 goToCard(currentIndex); slider.style.scrollSnapType = "x mandatory"; } slider.addEventListener("pointerup", endDrag); slider.addEventListener("pointercancel", endDrag); // 이미지가 드래그되는 것 방지 slider.addEventListener("dragstart", function (event) { event.preventDefault(); }); // 드래그 직후 불필요한 클릭 방지 slider.addEventListener("click", function (event) { if (hasMoved) { event.preventDefault(); hasMoved = false; } }, true); // 모바일 스와이프 및 스크롤 위치 반영 slider.addEventListener("scroll", function () { if (isDragging || scrollTicking) return; scrollTicking = true; window.requestAnimationFrame(function () { currentIndex = getNearestIndex(); updatePagination(); scrollTicking = false; }); }, { passive: true }); // 브라우저 창 크기가 바뀌면 재정렬 window.addEventListener("resize", function () { goToCard(currentIndex, false); }); // 첫 번째 카드에서 시작 updatePagination(); } // 페이지 로드 완료 후 실행 if (document.readyState === "loading") { document.addEventListener( "DOMContentLoaded", initHeysBenefitSlider ); } else { initHeysBenefitSlider(); } })();