스와이퍼 반응형 작동

thgus·2023년 5월 26일
0

javascript

목록 보기
2/3
코드를 입력하세//==============================
// 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가 같아야하는게 중요한 포인트였다...

flag 변수란...?

boolean값 true, false값을 가진 변수

profile
어쩌다보니IT

0개의 댓글