Vue2.0使用轮播插件 VueAwesomeSwiper

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>