코드를 입력하세//==============================
// 2023.05.25
// psh 수정작업
//==============================
let windowWidth = Number($(window).width());
let multiBannerSlider = undefined;
function mainListSwiper() {
mainListSwiper = new Swiper(".main-item-swiper", {
spaceBetween: 15,
slidesPerView: 2,
autoplay: false,
loop: false,
loopAdditionalSlides: 1,
navigation: {
nextEl: ".main-item-list-wrapper .swiper-button-next",
prevEl: ".main-item-list-wrapper .swiper-button-prev",
},
breakpoints: {
768: {
slidesPerView: "auto", //브라우저가 768보다 클 때
spaceBetween: 15,
},
1024: {
slidesPerView: 4, //브라우저가 1024보다 클 때
spaceBetween: 15,
},
},
});
}
// multiple-banner-section
function multiBannerSwiper() {
if (windowWidth < 768 && multiBannerSlider == undefined) {
multiBannerSlider = new Swiper(".multiple-banner-section", {
spaceBetween: 0, // 슬라이드 사이 여백
slidesPerView: 1, // 한 슬라이드에 보여줄 갯수
autoplay: false,
loop: true,
loopAdditionalSlides: 1,
});
} else if (windowWidth >= 768 && multiBannerSlider != undefined) {
multiBannerSlider.destroy();
multiBannerSlider = undefined;
}
}
//document ready
$(document).ready(function () {
//swiper
mainListSwiper(); //아이템 리스트 스와이퍼
multiBannerSwiper(); // 스와이퍼 배너
console.log(multiBannerSlider + "ready");
});
//window resize
$(window).resize(function () {
windowWidth = Number($(window).width());
multiBannerSwiper(); // 스와이퍼 배너
});
요
768 미만일때 swiper 가 작동하고 이상이 되면 swiper 이벤트리스너를 파괴한다.
flag로 사용하고 있는 multiBannerSlider가 같아야하는게 중요한 포인트였다...
boolean값 true, false값을 가진 변수