SIR
목록으로

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

우왕뿌잉뿌잉
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전 조회 7,856
답변 3
목록

Copy 
<!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에서 오류가 나는 이유가 있을까요? 전문가님들의 도움이 필요합니다.

#코딩 #웹표준 #js #슬라이더 #오류

답변 3개

채택된 답변
+20 포인트

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

4.5.1 버전대로 찾아보셔요

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

답변에 대한 댓글 1개

오~~~ 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>

 

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

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

스크립트 호출할때

최신버전이면 IE쪽 지원이 빠졌을수도있어요

해당 사이트 개발히스토리같은거 확인하셔야될거같네요

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

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

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

로그인
🐛 버그신고