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

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

 

<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개

채택된 답변
+20 포인트

안녕하세요!

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

늦어서 죄송합니다 ㅜㅜ

 

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

아래링크 확인해주시구요

https://eunyoe.tistory.com/58

 

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

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

댓글을 작성하려면 로그인이 필요합니다.

익스 접을때가 됐습니다

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

요즘엔 익스 배제하고 다 작업하시는거죠? 한두명이라도 들어올까봐 조치해두려한건데 안해도 되겠네요^^;; 감사합니다~
혹시 해상도별로 하는 breakpoints: {
320: {
slidesPerView: 4,
spaceBetween: 10,
slidesPerGroup : 4,
loopAdditionalSlides : 1,
},
이런 소스를 다른방법으로 변경하여 사용할 수는 없을까요?
미디어 쿼리 안되나요? 반응형이면 미디어쿼리고 적응형 (그누제공된거) 이면 그냥 백프로 잡아주셔야되요
감사합니다. 찾다가 이전 버전으로 하면 된다고 해서 이전버전으로 js 링크 변경해주고 이미지를 여러개 묶어서 작업해서 피씨,모바일 구분하여 이미지 한개씩 나오게 처리해서 해결했습니다^^

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고