멀티 슬라이드 제이쿼리 반응형 설정

멀티 슬라이드 제이쿼리 반응형 설정

QA

멀티 슬라이드 제이쿼리 반응형 설정

본문

멀티 슬라이드 제이쿼리 작업중인데요.

<div class="swiper-container mySwiper">
               <div class="swiper-wrapper">
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_01.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_02.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_03.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_04.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_05.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_06.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_07.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_08.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_09.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_10.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_11.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_12.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_13.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_14.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_15.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_16.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_17.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_18.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_19.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_20.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_21.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_22.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_23.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_24.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_25.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_26.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_27.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_28.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_29.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_30.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_31.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_32.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_33.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_34.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_35.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_36.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_37.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_38.jpg" alt=""></div>
               <div class="swiper-slide"> <img src="/img/images/ptn_logo_39.jpg" alt=""></div>
             </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>

이렇게 넣었고

<!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 49,
        centeredSlides: false,
        slidesPerView : '8',
       loopAdditionalSlides : 1, 
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>

 

한줄에 8개씩 들어가게 세팅해서 잘 돌아갑니다.

근데 반응형이여서 해상도에 따라서 너무 작게 보여서 조정해주고 싶어서 아래를 적용시켜야하는데

이대로 <script>안에 넣어보니 적용이 안되어서요~

어떻게 사용해야하는걸까요?

그리고 지금 현재는 왼쪽 오른쪽 화살표를 누르면 한개씩 이미지가 옆으로 이동하는데

8개씩 한번에 이동할 수 있게 가능할까요?

-------------------------------------------------------------------------------------------------------------

 

반응형 설정

swiper는 breakpoints라는 객체로 반응형 설정이 가능합니다. 아래 설정은 브라우저의 가로 크기가 768px 이하 일 때 동작하는 예시입니다.
 

breakpoints : { // 반응형 설정이 가능 width값으로 조정

768 : { slidesPerView : 1, }, },

//5.3.0부터 "비율"(너비 / 높이)로 설정이 가능해졌습니다.

var swiper = new Swiper('.swiper-container', {

slidesPerView: 1,

spaceBetween: 10,

breakpoints: {

'@0.75': {

slidesPerView: 2,

spaceBetween: 20,

},

'.00': {

slidesPerView: 3,

spaceBetween: 40,

},

'.50': {

slidesPerView: 4,

spaceBetween: 50,

},

}

});

이 질문에 댓글 쓰기 :

답변 1

slidesPerGroup : 한번에 넘어갈 숫자

답변감사합니다^^
지금 slidesPerGroup : '8', 로 해주니 너무 금방 끝나버려서 slidesPerGroup : '4',  이렇게 넣어봤는데..처음엔 4개씩 움직이다가 2번째부턴 8개씩 움직이고 있는데요. 또 추가로 적어줘야할 부분이 있는걸까요?;; 아님 한줄 8개 단위로만 가능한건지요?

slidesPerView 와 그룹은 동일하게 적어주는것이 좋으며.
버전업 이후로 비율로 반응형 설정이 가능하긴 하나. 기본에 맞추어진 px를 비율로 환산하는게 번거로워 일부러 기기 사이즈에 맞추어 반응형 변환을 합니다.

https://swiperjs.com/demos

스와이퍼 데모사이트 입니다. 원하시는 테마를 찾아보고 여러가지 입맛에 맞게 구현해 보시는게 더욱 좋을 것 같습니다 ^^

답변 감사합니다~ 다행히 제대로 적용하였어요~ 그런데..크롬에선 잘 보여지는데 익스에선 한줄에 한개씩만 나오더라구요. 익스 사용하시는 분들이 아직 있을것 같아서~ 어떻게 처리해야할까요?ㅠ

답변이 늦어서 죄송합니다.
swiper 플러그인을 최신형으로 사용하고 계시는거 같은데 IE는 곧 서비스 종료도 앞두고 있고
최신버전과 호환이 되지 않습니다.
아래 링크 확인해보시구요.
https://eunyoe.tistory.com/58

아랫버전 받으셔서 플러그인 적용시켜야 할 것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 49
QA 내용 검색

회원로그인

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