swiper异形轮播

<!--在head中引入css-->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">1</div>
		<div class="swiper-slide">2</div>
		<div class="swiper-slide">3</div>
		<div class="swiper-slide">4</div>
		<div class="swiper-slide">5</div>
		<div class="swiper-slide">6</div>
		<div class="swiper-slide">7</div>
		<div class="swiper-slide">8</div>
		<div class="swiper-slide">9</div>
		<div class="swiper-slide">10</div>
	</div>
</div>
<!--引入js-->
<script src="../dist/js/swiper.min.js"></script>

html,
body {
	position: relative;
	height: 100%;
}
body {
	background: #eee;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
}
.swiper-container {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	transform: scale(0.6);
}
/* 中间部分的左右两个 */
.swiper-slide-prev,
.swiper-slide-next {
	transform: scale(0.8);
}
/* 中间部分 */
.swiper-slide-active,
.swiper-slide-duplicate-active {
	transform: scale(1);
}

var swiper = new Swiper('.swiper-container', {
	slidesPerView: 5,//设置slider容器能够同时显示的slides数量
	spaceBetween: 30,//slide之间设置距离
	centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左
	loop: true,//在原本slide前后复制若干个slide(默认一个)并在合适的时候切换
	autoplay: {//设置为true启动自动切换，object/boolean
	  delay: 2500,//自动切换的时间间隔
	  disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay，设置为false，用户操作swiper之后自动切换不会停止
	}
});