스와이프 슬라이드 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 버전대로 찾아보셔요
오~~~ 4.5.1 버전으로 바꾸어서 해결했습니다! 감사합니다^^
스크립트 호출할때
최신버전이면 IE쪽 지원이 빠졌을수도있어요
해당 사이트 개발히스토리같은거 확인하셔야될거같네요
제작사에서 더이상 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>
답변을 작성하시기 전에 로그인 해주세요.
