스와이프 슬라이드 IE에서 작동을 안합니다

스와이프 슬라이드 IE에서 작동을 안합니다

QA

스와이프 슬라이드 IE에서 작동을 안합니다

본문


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://swiperjs.com/package/swiper-bundle.min.css">
  <!-- Demo styles -->
  <style>
    body {
      position: relative;
      height: 100%;
      background: #000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: transparent;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
.swiper-button-prev{
    z-index: 52;
    left: 60px;
    width: 35px;
    height: 71px;
    margin-top: -35px;
    background: url(http://webimg.codigallery.com/Content/images/renew2020/btn/btn_swp_arrow_left_white.png) no-repeat 0 0/100%
    }    
.swiper-button-next {
    z-index: 52;
    right: 60px;
    width: 35px;
    height: 71px;
    margin-top: -35px;
    background: url(http://webimg.codigallery.com/Content/images/renew2020/btn/btn_swp_arrow_right_white.png) no-repeat 0 0/100%
    }
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{display:none;}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{display:none;}
  </style>

</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="http://webimg.codigallery.com/data/board/images/201022_thankyou/slide_01.jpg"></div>
      <div class="swiper-slide"><img src="http://webimg.codigallery.com/data/board/images/201022_thankyou/slide_02.jpg"></div>
      <div class="swiper-slide"><img src="http://webimg.codigallery.com/data/board/images/201022_thankyou/slide_03.jpg"></div>
      <div class="swiper-slide"><img src="http://webimg.codigallery.com/data/board/images/201022_thankyou/slide_04.jpg"></div>
      <div class="swiper-slide"><img src="http://webimg.codigallery.com/data/board/images/201022_thankyou/slide_05.jpg"></div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  </div>
  <!-- Swiper JS -->
  <script src="https://swiperjs.com/package/swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3.8,
      loop: true,
      centeredSlides: true,
      spaceBetween: 30,
      grabCursor: true,
    autoplay: {
        delay: 2000,
        disableOnInteraction: false,
      },
     navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      });
  </script>
</body>
</html>

 

 

해당 소스를 적용하려고 하는데 크롬에서는 되는데, 익스에서는 동작하지 않아요.

스와이프 슬라이드가 IE에서 오류가 나는 이유가 있을까요? 전문가님들의 도움이 필요합니다.

이 질문에 댓글 쓰기 :

답변 3

bundle은 IE지원을 안하는 경우가 많습니다

4.5.1 버전대로 찾아보셔요

제작사에서 더이상 ie는 지원하지 않는다고 하네요.

구버전을 적용하시면 되지 않을까요

// CSS link

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">

// JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

 

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

회원로그인

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