스와이퍼 반응형 설정했는데 익스에서 적용시키려면? 도와주세요

스와이퍼 반응형 설정했는데 익스에서 적용시키려면? 도와주세요

QA

스와이퍼 반응형 설정했는데 익스에서 적용시키려면? 도와주세요

본문

스와이퍼 반응형 설정 소스인데요.

 

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        breakpoints: {
           320: {
            slidesPerView: 4,
            spaceBetween: 10,
             slidesPerGroup : 4,
            loopAdditionalSlides : 1,
          },

           480: {
            slidesPerView: 4,
            spaceBetween: 20,
             slidesPerGroup : 4,
            loopAdditionalSlides : 1,
          },
          640: {
            slidesPerView: 6,
            spaceBetween: 20,
             slidesPerGroup : 6,
            loopAdditionalSlides : 1,
          },
          768: {
            slidesPerView: 6,
            spaceBetween: 40,
            slidesPerGroup : 6,
            loopAdditionalSlides : 1,
          },
          1024: {
            slidesPerView: 8,
            spaceBetween: 49,
            slidesPerGroup : 8,
            loopAdditionalSlides : 1,
          },
        },
      });
    </script>

이런식으로 참고해서 적용시켰는데 크롬,사파리에선 해상도별로 너무 잘 되는데..

익스에서 안먹어요ㅠㅠ

한줄에 한개씩만 나오는데요.

익스 지원 안되어서 그런걸까요?

이거 적용시키려면 어떻게 해야하나요?ㅠ

아직 익스 쓰시는 분들도 계실거같아서요.

 

이 질문에 댓글 쓰기 :

답변 2

안녕하세요!

전에 주신 댓글에 답변이 늦어 달아드렸으나 못보실수도 있어 여기에라도 달고 갑니다.

늦어서 죄송합니다 ㅜㅜ

 

익스는 이제 곧 서비스 종료이며 호환성 문제로 swiper 최신버전은 호환이 되지 않습니다.

아래링크 확인해주시구요

https://eunyoe.tistory.com/58

 

익스유저를 꼭 신경쓰셔야 한다면 아랫버전을 이용하셔야 합니다..

아아 감사합니다^^ 제가 많이 찾아보다 이전 글에 댓글 달아놓았는데 보셨나봐요~  많이 찾아보니 이전 버전으로 해야한다고해서 이전버전으로 js 넣고 야매로 이미지 모바일용, 피씨용 작업 따로해서 보여지는것만 달리해서 처리하였습니다~

익스 접을때가 됐습니다

MS는 우선 오는 2021년 8월 17일부터 MS 365 및 여러 MS의 웹 애플리케이션을 IE 11에서 사용할 수 없게 되며, 오는 2022년 6월 15일에는 지원을 완전히 종료하게 된다.

혹시 해상도별로 하는 breakpoints: {
          320: {
            slidesPerView: 4,
            spaceBetween: 10,
            slidesPerGroup : 4,
            loopAdditionalSlides : 1,
          },
이런 소스를 다른방법으로 변경하여 사용할 수는 없을까요?

감사합니다. 찾다가 이전 버전으로 하면 된다고 해서 이전버전으로 js 링크 변경해주고 이미지를 여러개 묶어서 작업해서 피씨,모바일 구분하여 이미지 한개씩 나오게 처리해서 해결했습니다^^

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

회원로그인

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