利用swiper2实现轮播图两侧显示前后屏的虚影

效果图：

var mySwiper = new Swiper('.swiper-container',{
    	pagination: '.pagination',
		paginationClickable: true,
		autoplay:4000,
		loop:true,
		loopedSlides :2,
		loopAdditionalSlides : 2, //loop模式下slides数量增加个数
		centeredSlides: true,
		slidesPerView: 'auto'
  })
   $('.banner .leftbanner').on('click', function(e){
        e.preventDefault();
        mySwiper.swipePrev()
    });
    $('.banner .rightbanner').on('click', function(e){
        e.preventDefault();
        mySwiper.swipeNext()
    });

.banner .swiper-slide {
  height: 100%;
  opacity: 0.4;
}
.banner .swiper-slide-active {
  opacity: 1;
}

	<div class="banner">
	  <div class="swiper-container">
	    <div class="swiper-wrapper">
	      <div class="swiper-slide blue-slide" >
	        <div class="banDetail">
				<a class="pic"  href="#" target="_blank">
					<img src="style/web/images/banner.png" alt=""/>
				</a>
				<div class="bantxt text">
					<h2 class="tit">
						<a href="#" target="_blank">2NaCl胁迫对银杏幼树组织解剖结构和光合作用的影响</a>
				   </h2>
				</div>
			</div>
	      </div>
	      <div class="swiper-slide orange-slide" >
	        <div class="banDetail">
				<a class="pic"  href="#" target="_blank">
					<img src="style/web/images/custom/banner.png" alt=""/>
				</a>
				<div class="bantxt text">
					<h2 class="tit">
						<a href="#" target="_blank">2NaCl胁迫对银杏幼树组织解剖结构和光合作用的影响</a>
				   </h2>
				</div>
			</div>
	      </div>   
	    <div class="pagination"></div>
	    	<div class="arrow-left leftbanner">
            <img src="style/web/images/leftbanner.png" alt="">
        </div>
        <div class="arrow-right rightbanner">
            <img src="style/web/images/rightbanner.png" alt="">
        </div>
	  </div>
	</div>