Swiper 슬라이더 익스플로러에서 작동 안될 때 해결 방법

다양한 옵션과 효과를 제공하여 홈페이지에서 많이 사용하고 있는 Swiper 슬라이더.

작업을 다 하고 브라우저별로 확인하는데 익스플로러에서는 Swiper 작동이 안되는 불상사가.

여기저기 헤매던 중 해결 방법을 찾게 되었다.

 

바로 Swiper버전을 낮추는 것!

 

https://cdnjs.com/libraries/Swiper/

Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

위의 사이트에 접속하면 Swiper 버전별로 js 및 css 를 복사할 수 있는데 Swiper 버전을 5.0 밑으로 선택하면 된다.

5.0 바로 밑이 4.5.1이라 4.5.1로 선택하였다. css 및 js 코드를 복사해서 넣어주면 끝!

 

 

현재는 버전8까지 나와있는데, 4까지 낮춰야하다니...

 

버전에 따라서 옵션이 다르겠지만 다행히 기본적인 네비게이션 버튼, 페이지네이션 등은 버전4.5.1로 낮추어도 잘 작동했다. 크로스브라우징을 위해서는 어쩔수 없는 선택이다.

 

 

[Swiper 4.5.1버전 사용 예시]

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="1.jpg"></div>      
        <div class="swiper-slide"><img src="2.jpg"></div>      
        <div class="swiper-slide"><img src="3.jpg"></div>      		
    </div>	
    
	<div class="swiper-pagination"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" integrity="sha512-nSomje7hTV0g6A5X/lEZq8koYb5XZtrWD7GU2+aIJD35CePx89oxSM+S7k3hqNSpHajFbtmrjavZFxSEfl6pQA==" crossorigin="anonymous" referrerpolicy="no-referrer" /><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js" integrity="sha512-c0NksyGPH0LUkeV3kgNU6p98oYwacImv508UsTDKqTWpEk1LFDMC8falFf9A2HZ8vt1ZIj3K4TNw2YT4Cid28Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js" integrity="sha512-ZHauUc/vByS6JUz/Hl1o8s2kd4QJVLAbkz8clgjtbKUJT+AG1c735aMtVLJftKQYo+LD62QryvoNa+uqy+rCHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    var swiper = new Swiper('.swiper', {
        slidesPerView: 1,
        speed:2000,
        autoplay: {
            delay: 2000
        },
        spaceBetween: 0,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {  
            nextEl: ".swiper-button-next", 
            prevEl: ".swiper-button-prev",
        }          
    });    
</script>

 

 

 

Swiper4에서 제공하는 파라미터

 

다행히 4버전에서도 다양한 파라미터를 제공해서 추가 개발이 필요한 경우 해당 페이지를 참고하면 되겠다.

http://web.archive.org/web/20190803102500/http://idangero.us/swiper/api/

 

 

한가지 아쉬운점은 새로운 버전이 나오면 구버전은 전혀 지원을 하지 않는다고 한다.