IE effect!
.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";
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
}
};
</script>
<style scoped>
.banner {
margin-bottom:40px;
}
.banner-box {
width:100%;
height:700px;
overflow: hidden;
}
.banner-box img{
width:100%;
height:100%;
}
</style>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: "-sharpapp",
router,
components: { App },
template: "<App/>"
})ask for guidance