Open pipeng119 opened 6 years ago
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.
Same here, but using simple horizontal scroll
Actually it's working for me in IE Edge but not ie 11. its stop rendering the DOM itself :(
code in vue-cli: main.js
.vue
Using 3D vertical scrolling in Internet explorer, only one image is displayed, and other browsers are normal.