<template>
	<div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item,index) in list" :key="index">
					<a href>
						<img :src="item.cover" :alt="item.alt" />
					</a>
				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
	</div>
</template>

<script>
import axios from '../plugins/axios'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
	name: 'banner',
	data() {
		return {
			banner: [
				{
					alt: '异地取还',
					cover:
						'https://xxtest.upyuns.com/image/admin/2019-08-30/32.jpg',
					id: 29,
					title: '异地取还',
					url: ''
				},
				{
					alt: '欣新房车',
					cover:
						'https://mgmt.dfangche.com/image/admin/2019-10-22/109.jpg',
					id: 29,
					title: '欣新房车',
					url: ''
				}
			]
		}
	},
	props: [
		'list',
		'looptime',
		'height',
		'width',
		'background',
		'color',
		'fontSize'
	],
	methods: {},
	mounted() {
		let t = this
		let title = this.banner
		t.swiper = new Swiper('.swiper-container', {
			// autoplay: true,
			effect: 'fade',
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
				renderBullet: function(index, className) {
					return '<span class="' + className + '">' + title[index].title + '</span>'
				}
			}
		})
	},
	created() {
	}
}
</script>
<style>
@import '../assets/banner.css';
.swiper-pagination-bullet{
	display: inline-block;
    width: auto;
    height: auto;
    background: #fff;
    opacity: 1;
    padding: 8px 19px;
    border-radius: 0;
	font-size: 14px;
	margin: 10px 4px !important;
}
.swiper-pagination-bullet-active{
	background: #1bbb9f;
	color: #fff;
}
</style>
