swiper兼容性ie浏览器出现的问题

安装swiper版本4.0.5版本后

npm install swiper@4.0.5 --save

引入方法

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.css';

使用

   new Swiper('#certify .swiper-container', {
                watchSlidesProgress: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                loop: true,
                loopedSlides: 5,
                autoplay: {
                    delay: 10000, 
                    disableOnInteraction: false 
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                on: {
                    progress () {
                        for (let i = 0; i < this.slides.length; i++) {
                            const slide = this.slides.eq(i);
                            const slideProgress = this.slides[i].progress;
                            let modify = 1;
                            if (Math.abs(slideProgress) > 1) {
                                modify = (Math.abs(slideProgress) - 1) * 0.5 + 1;
                            }
                            const translate = `${slideProgress * modify * 130}px`;
                            const scale = 1 - Math.abs(slideProgress) / 5;
                            const zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                            slide.transform(`translateX(${translate}) scale(${scale})`);
                            slide.css('zIndex', zIndex);
                            slide.css('opacity', 1);
                            if (Math.abs(slideProgress) > 3) {
                                slide.css('opacity', 0);
                            }
                        }
                    },
                    setTransition (transition) {
                        for (let i = 0; i < this.slides.length; i++) {
                            const slide = this.slides.eq(i);
                            slide.transition(transition);
                        }
                    }
                }
            });

实现效果为轮播展示。

ie浏览器一致报错，查询兼容性，按道理4版本是支持ie的。

后来发现Swiper.js 这个 npm 包里面还使用了 dom7 和 ssr-window，所以需要对这两个插件进行 Babel 转 ES5

Vue CLI 3.x 下

在 vue.config.js 中增加 transpileDependencies 配置

 

module.exports = {
    transpileDependencies: [
        "swiper",
        "dom7",
        "ssr-window"
    ]
}

参考： https://segmentfault.com/a/1190000016334023