Bugs in IE Edge.

[pipeng119]

code in vue-cli: main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

.vue

<template>
    <div>
        <swiper :options="swiperOption" class="banner-box">
                <swiper-slide>
                    <img src="/static/banner-1.jpg" alt="">
                </swiper-slide>
                <swiper-slide>
                    <img src="/static/banner-2.jpg" alt="">
                </swiper-slide>
                <swiper-slide>
                    <img src="/static/banner-3.jpg" alt="">
                </swiper-slide>
                <swiper-slide>
                    <img src="/static/banner-4.jpg" alt="">
                </swiper-slide>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
                <div class="swiper-pagination" slot="pagination" style="position:absolute;z-index:50"></div>
            </swiper>
    </div>

</template>
<script>
    import "swiper/dist/css/swiper.css"
    import {
        swiper, swiperSlide
    }
    from "vue-awesome-swiper";
    import test from './test'
    export
    default {
        data() {
            return {
                swiperOption: {
                    // autoplay: {
                    //     styoOnLastSlide: true,
                    //     delay: 2000
                    // },
                    loop: true,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    effect: "cube",
                    direction: "vertical"
                }
            };
        },
        components: {
            swiper,
            swiperSlide
        },
        mixins:[test],
        created(){
            console.log("I'm in vue")
        }
    };
</script>
<style scoped>
    .banner {
        margin-bottom:40px;
    }
    .banner-box {
        width:100%;
        height:700px;
        overflow: hidden;
    }
    .banner-box img{
        width:100%;
        height:100%;
    }
</style>

Using 3D vertical scrolling in Internet explorer, only one image is displayed, and other browsers are normal.

[Grundmanis]

Same here, but using simple horizontal scroll

[laksmaria]

Actually it's working for me in IE Edge but not ie 11. its stop rendering the DOM itself :(