swiper轮播图（中间大，两侧小）

效果图：

<link rel="stylesheet" href="http://t.zoukankan.com/plugins/swiper.min.css">

	<div   class="col-md-12">
            <div   style=" 90%;height: 450px;">
		<div class="swiper-wrapper">
		  <div class="swiper-slide"><a href="http://t.zoukankan.com/FormerWhite-p-12166201.html"><img src="http://t.zoukankan.com/img/index/矩形备份 8.png"></a><span>aaa</span></div>
		  <div class="swiper-slide"><a href="http://t.zoukankan.com/FormerWhite-p-12166201.html"><img src="http://t.zoukankan.com/img/index/矩形(2).png"></a><span>bbb</span></div>
		  <div class="swiper-slide"><a href="http://t.zoukankan.com/FormerWhite-p-12166201.html"><img src="http://t.zoukankan.com/img/index/矩形备份 7.png"></a><span>ccc</span></div>
		  <div class="swiper-slide"><a href="http://t.zoukankan.com/FormerWhite-p-12166201.html"><img src="http://t.zoukankan.com/img/index/u14.jpg"></a><span>ddd</span></div>
		  <div class="swiper-slide"><a href="http://t.zoukankan.com/FormerWhite-p-12166201.html"><img src="http://t.zoukankan.com/img/index/u19.jpg"></a><span>eee</span></div>
	        </div>
		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"><img src="http://t.zoukankan.com/img/index/编组 5备份.png" alt=""></div>
		<div class="swiper-button-next"><img src="http://t.zoukankan.com/img/index/编组 5.png" alt=""></div>
	    </div>
	</div>

<script src="http://t.zoukankan.com/plugins/swiper.min.js"></script>
<script>        
		var mySwiper = new Swiper ('.swiper-container', {
			watchSlidesProgress: true,
			slidesPerView: 'auto',
			centeredSlides: true,
			loop: true,
			loopedSlides: 3,
			autoplay: 3000,
			prevButton: '.swiper-button-prev',
			nextButton: '.swiper-button-next',
			pagination: '.swiper-pagination',
			//paginationClickable :true,
			onProgress: function(swiper, progress) {
				for (i = 0; i < swiper.slides.length; i++) {
					var slide = swiper.slides.eq(i);
					var slideProgress = swiper.slides[i].progress;
					modify = 1;
					if (Math.abs(slideProgress) > 3) {
						modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
					}
					translate = slideProgress * modify * 380 + 'px';
					scale = 1 - Math.abs(slideProgress) / 2.5;
					zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
					slide.transform('translateX(' + translate + ') scale(' + scale + ')');
					slide.css('zIndex', zIndex);
					slide.css('opacity', 1);
					if (Math.abs(slideProgress) > 1) {
						slide.css('opacity', 0);
					}
				}
			},
			onSetTransition: function(swiper, transition) {
				for (var i = 0; i < swiper.slides.length; i++) {
					var slide = swiper.slides.eq(i)
					slide.transition(transition);
				}

			},
			//处理分页器bug
			// onSlideChangeStart: function(swiper) {
			// 	if (swiper.activeIndex == 4) {
			// 		swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');
			// 		console.log(swiper.bullets.length);
			// 	}
			// }
			})
			</script>

#certify {
	position: relative;
	 100%;
	margin: 72px auto 0
}

#certify .swiper-container {
	/* padding-bottom: 60px; */
}

#certify  .swiper-slide {
	 854px;
	height: 450px;
  background: #fff;
  position: relative;
}
#certify  .swiper-slide img{
   100%;
  height: 100%;
	display:block;
}
#certify  .swiper-slide span {
   100%;
  height: 80px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size:30px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(255,255,255,1);
  background:rgba(0,0,0,0.5);
  text-align: center;
  line-height: 80px;
}

#certify .swiper-pagination {
	 100%;
	bottom: 20px;
}

/* #certify .swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 5px;
	border: 3px solid #fff;
	background-color: #d5d5d5;
	 10px;
	height: 10px;
	opacity: 1;
} */

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
	border: 3px solid #00aadc;
	background-color: #fff;
}

#certify .swiper-button-prev {
  left: 0;
   80px;
  font-size: 30px;
  text-align: center;
  line-height: 80px;
  height: 80px;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
}

/* #certify .swiper-button-prev:hover {
	background-position: 0 -46px;
	background-size: 100%
} */

#certify .swiper-button-next {
  right: 0;
  font-size: 30px;
  text-align: center;
  line-height: 80px;
   80px;
  height: 80px;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
}