hmw1001
96 lines
3.5 KiB
JavaScript
96 lines
3.5 KiB
JavaScript
/**
|
|
* rb.custom :: pns_visual_borad_laser/module.js
|
|
* 메인 비주얼 슬라이더 스크립트 (Swiper 사용)
|
|
*/
|
|
|
|
(function($) {
|
|
"use strict";
|
|
|
|
// 이미 함수가 정의되어 있다면 중복 정의 방지
|
|
if (typeof window.initPnsVisualSlider === 'function') {
|
|
// return;
|
|
}
|
|
|
|
/**
|
|
* 슬라이더 초기화 함수
|
|
* @param {string} moduleId - 슬라이더 컨테이너의 ID
|
|
*/
|
|
window.initPnsVisualSlider = function(moduleId) {
|
|
const $module = $('#' + moduleId);
|
|
if (!$module.length) return;
|
|
|
|
const $swiperContainer = $module;
|
|
|
|
// 데이터 속성에서 설정값 가져오기 (없으면 기본값 사용)
|
|
const spaceBetween = parseInt($swiperContainer.data('space-between'), 10) || 0; // 슬라이드 간 간격
|
|
// 💡 [수정] autoplay 시간 설정값 가져오기 (기본값 5000ms)
|
|
const autoplayDelay = parseInt($swiperContainer.data('autoplay-time'), 10) || 5000;
|
|
const totalSlides = $swiperContainer.find('.swiper-slide').length; // 전체 슬라이드 개수
|
|
|
|
// Swiper 옵션 설정
|
|
const swiperOptions = {
|
|
// 💡 [핵심] 한 번에 보여줄 슬라이드 개수 (1로 설정하여 꽉 차게 표시)
|
|
slidesPerView: 1,
|
|
spaceBetween: spaceBetween,
|
|
|
|
// 슬라이드가 1개보다 많을 때만 무한 루프 활성화
|
|
loop: totalSlides > 1,
|
|
|
|
// DOM 변화 감지 및 자동 업데이트 (이미지 로딩 문제 방지)
|
|
observer: true,
|
|
observeParents: true,
|
|
watchOverflow: true,
|
|
|
|
// 자동 재생 설정
|
|
autoplay: {
|
|
delay: autoplayDelay, // 💡 [수정] 설정된 시간 적용
|
|
disableOnInteraction: false, // 사용자 상호작용 후에도 자동 재생 유지
|
|
},
|
|
|
|
// 네비게이션 버튼 (이전/다음)
|
|
navigation: {
|
|
nextEl: $module.find('.swiper-button-next')[0],
|
|
prevEl: $module.find('.swiper-button-prev')[0],
|
|
},
|
|
|
|
// 페이지네이션 (하단 점)
|
|
pagination: {
|
|
el: $module.find('.swiper-pagination')[0],
|
|
clickable: true, // 클릭하여 이동 가능
|
|
},
|
|
|
|
// 반응형 설정 (화면 크기에 따른 설정 변경)
|
|
// 현재는 모든 해상도에서 1개씩 보여주도록 고정됨
|
|
breakpoints: {
|
|
640: {
|
|
slidesPerView: 1 // 태블릿 등에서도 1개
|
|
},
|
|
1024: {
|
|
slidesPerView: 1 // PC에서도 1개
|
|
}
|
|
}
|
|
};
|
|
|
|
// 슬라이드가 1개 이하일 경우 네비게이션/페이지네이션 숨기고 롤링 비활성화
|
|
if (totalSlides <= 1) {
|
|
$module.find('.swiper-button-next, .swiper-button-prev, .swiper-pagination').hide();
|
|
swiperOptions.loop = false;
|
|
swiperOptions.autoplay = false;
|
|
}
|
|
|
|
// Swiper 인스턴스 생성 및 초기화
|
|
new Swiper($swiperContainer[0], swiperOptions);
|
|
};
|
|
|
|
// 문서 로드 완료 후 실행
|
|
$(function() {
|
|
// .pns-visual-slider 클래스를 가진 모든 요소를 찾아 초기화
|
|
$('.pns-visual-slider').each(function() {
|
|
if ($(this).attr('id')) {
|
|
window.initPnsVisualSlider($(this).attr('id'));
|
|
}
|
|
});
|
|
});
|
|
|
|
})(jQuery);
|