<template>
	<swiper class="zgh-prod" :options="swiperOption">
		<swiper-slide v-for="index in prodNums" :key="index">
			<slot :name="'prod'+index"></slot>
		</swiper-slide>
		<div class="swiper-pagination" slot="pagination"></div>
	</swiper>
</template>

<script>
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'
	export default {
		name:"ZghSwiper",
		components: {
			swiper,
			swiperSlide
		},
		props: {
			prodNums: {
				default: 3
			},
			swiperOpt: {
				default() {
					return {
						freeMode: true
					}
				}
			}
		},
		data() {
			return {
				swiperOption: Object.assign({
					notNextTick: true,
					slideToClickedSlide: true,
					initialSlide: 0,
					watchSlidesProgress: true,
					watchSlidesVisibility: true,
					slidesPerView: 'auto',
					freeMode: true
				}, this.swiperOpt)
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
	@import url("../../assets/config.less");
	.zgh-prod {
		overflow: visible;
		.swiper-slide {
			display: inline-block;
			width: auto;
		}
		&.swiper-container-horizontal>.swiper-pagination-bullets,
		.swiper-pagination-custom,
		.swiper-pagination-fraction {
			bottom: -20px;
		}
		.swiper-pagination-bullet {
			width: 15px;
			height: 3px;
			border-radius: 0;
		}
		.swiper-pagination-bullet-active {
			background: @common_cl;
		}
	}
</style>
