1.第一步安装VueAwesomeSwiper
npm install vue-awesome-swiper --save
2.第二步在main.js中引入
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
在这部为止就可以使用该插件了
3. 具体配置组件配置细节
<template>
<div class="bottom" id="bottom">
<!-- 滚动banner -->
<div class="banner">
<swiper :options="swiperOption" class="swiper-radius">
<swiper-slide>
<img @click="openwindow()" class="bottom-banner-img" src="../../../static/images/20180530lby-bottomBanner01.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img @click="openwindow()" class="bottom-banner-img" src="../../../static/images/20180530lby-bottomBanner02.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img @click="openwindow()" class="bottom-banner-img" src="../../../static/images/20180530lby-bottomBanner03.jpg" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<div class="jc"></div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data () {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination',
clickable: true
},
direction: 'horizontal',
paginationClickable: true,
autoplayDisableOnInteraction: false,
loop: true,
setWrapperSize: true,
slidesPerView: 1,
spaceBetween: -50,
centeredSlides: true,
initialSlide: 1,
loopAdditionalSlides: 1,
autoplay: {
delay: 1800
},
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows: true
}
}
}
},
methods: {
openwindow () {
this.$emit('setting')
console.log()
},
opensale () {
this.$emit('onsale')
console.log()
}
},
components: {
swiper,
swiperSlide
}
}
</script>
<style lang="less">
</style>