그누보드 QA - swiper 스크립트 반응형 옵션

swiper 스크립트 반응형 옵션

long5472 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020.12.16 16:40:22 조회 2503 (114.♡.♡.128)

본문

반응형 페이지 제작중

스와이퍼를 이용한 5개의 이미지가 2줄로 3 그룹씩 움직입니다.

다만 모바일로 가니 5개가 아닌 2개로 바꾸고 싶어 이래저래 검색해봤는데


var mql = window.matchMedia("screen and (max-width: 768px)");
  if (mql.matches) {
      console.log("화면의 너비가 768px 보다 작습니다.");
  } else {
      console.log("화면의 너비가 768px 보다 큽니다.");
}

를 이용한 스크립트자체도 반응형을 줄 수가 있더라구요.

근데 자바스크립트는 아직 꽝인 초보자라 질문 남깁니다.


var swiper = new Swiper('.swiper-container', {
      slidesPerView: 5,
      slidesPerColumn: 2,
      slidesPerGroup:3,
      spaceBetween: 30,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

에서 Perview =2

PerGroup =2 만 바꾸면 될것같은데,,

통째로 if, else 에 넣으니 안되더라구요..

유일한 질문게시판에 올려봅니다 ㅜ.