swiper slide 가로 정렬이었다가 세로 정렬

swiper slide 가로 정렬이었다가 세로 정렬

QA

swiper slide 가로 정렬이었다가 세로 정렬

본문

현재 swiper slide 아이템을 4개씩 써서 한줄에 가로 정렬로 4개가 보이는 상태입니다.

그런데 모바일로 갔을 때는 한 슬라이드에 2개의 항목이 보여지게 하고 싶은데요

 

3554271915_1688532844.8939.png

 

swiper의 옵션값을 이용하여 바꿀 수있다고 하는데 공홈에서 찾아보고 적용해봐도 안되네요..

혹시 아시는 분 계실까요?

이 질문에 댓글 쓰기 :

답변 3

대략 다음과 같이 수정을 하면 되지 않을까 합니다.

html구조와 CSS 를 수정해서 모바일에서는 세로로 출력되게 하면 될 것 같습니다.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Swiper Slide Example</title>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <style>
    .swiper-container {
      width: 100%;
      height: 100vh;
    }
    .swiper-slide {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }
    @media (max-width: 768px) {
      .swiper-slide {
        width: 100%;
        height: 50vh;
      }
    }
  </style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="slide-content">Item 1</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-content">Item 2</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-content">Item 3</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-content">Item 4</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-content">Item 5</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-content">Item 6</div>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 10,
      breakpoints: {
        768: {
          slidesPerView: 2,
        }
      }
    });
  </script>
</body>
</html>

참고하셔서 작업 하시면 될듯 합니다

https://codepen.io/syrizaldev/pen/xxxmdzw

js 부분 옵션 보시면 // Responsive breakpoints 해서 반응형으로 하는게 있습니다. 참고하셔서 동일하게 크기에 따라서 보여질 갯수를 지정해주시면 될거 같습니다.

우선 Swiper 컨테이너 및 슬라이드 항목을 마크업 해주시고


<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Item 1</div>
    <div class="swiper-slide">Item 2</div>
    <div class="swiper-slide">Item 3</div>
    <div class="swiper-slide">Item 4</div>
    <!-- 추가 슬라이드 항목 -->
    <div class="swiper-slide">Item 5</div>
    <div class="swiper-slide">Item 6</div>
  </div>
</div>

CSS Swiper 컨테이너의 크기를 설정하고, 슬라이드 항목의 너비를 조정


.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  width: 25%; /* 한 줄에 4개의 슬라이드가 보이도록 설정 */
}
@media (max-width: 768px) {
  /* 모바일에서는 한 줄에 2개의 슬라이드가 보이도록 설정 */
  .swiper-slide {
    width: 50%;
  }
}

slidesPerView 를 모바일에 맞게 조정을 해주시면 되지 않을까 합니다.


var swiper = new Swiper('.swiper-container', {
  slidesPerView: 4, // 한 줄에 보여지는 슬라이드 개수 (기본값: 1)
  spaceBetween: 10, // 슬라이드 간격 (선택적)
  // 추가 옵션 및 설정...
});
답변을 작성하시기 전에 로그인 해주세요.
전체 301
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT