hmw1001
59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
(function($) {
|
|
"use strict";
|
|
|
|
if (typeof window.initRollingBannerFooter === 'function') {
|
|
// return;
|
|
}
|
|
|
|
window.initRollingBannerFooter = function(moduleId) {
|
|
const $module = $('#' + moduleId);
|
|
if (!$module.length) return;
|
|
|
|
const $swiperContainer = $module.find('.swiper-container');
|
|
|
|
const autoplayDelay = parseInt($swiperContainer.data('autoplay-delay'), 10) || 3000;
|
|
const slidesPerViewPC = parseInt($swiperContainer.data('slides-per-view'), 10) || 6;
|
|
|
|
new Swiper($swiperContainer[0], {
|
|
// slidesPerView: 'auto', // 💡 [삭제] 자동 너비 대신 개수 지정
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: autoplayDelay,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: $module.find('.swiper-button-next')[0],
|
|
prevEl: $module.find('.swiper-button-prev')[0],
|
|
},
|
|
observer: true,
|
|
observeParents: true,
|
|
// 💡 [핵심 수정] 반응형 Breakpoints 설정
|
|
breakpoints: {
|
|
// 320px 이상일 때
|
|
320: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 10
|
|
},
|
|
// 768px 이상일 때 (태블릿)
|
|
768: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 20
|
|
},
|
|
// 1024px 이상일 때 (PC)
|
|
1024: {
|
|
slidesPerView: slidesPerViewPC,
|
|
spaceBetween: 20
|
|
},
|
|
}
|
|
});
|
|
};
|
|
|
|
$(function() {
|
|
$('.rolling-banner-footer').each(function() {
|
|
window.initRollingBannerFooter($(this).attr('id'));
|
|
});
|
|
});
|
|
|
|
})(jQuery);
|