源码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">  	
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

<div class="swiper-container" id="swiper-container1" style="height:300px;">
	<div class="swiper-wrapper">
		<div class="swiper-slide blue-slide">
			slider1</div>
		<div class="swiper-slide red-slide">
			slider2</div>
		<div class="swiper-slide orange-slide">
			slider3</div>
		<div class="swiper-slide blue-slide">
			slider4</div>
		<div class="swiper-slide red-slide">
			slider5</div>
		<div class="swiper-slide orange-slide">
			slider6</div>
		<div class="swiper-slide blue-slide">
			slider7</div>
		<div class="swiper-slide red-slide">
			slider8</div>
		<div class="swiper-slide orange-slide">
			slider9</div>
	</div>
</div>

<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
     delay: 3000
  },
  loop: 1,
  effect : 'coverflow',
  slidesPerView: "auto",
  centeredSlides: true,
	coverflowEffect: {
		rotate: 50,
		stretch: 0,
		depth: 100,
		modifier: 1,
		slideShadows: true
	}
})
</script>

可是我不想让他显示这么多，只让它显示3个，怎么办？

我们可以看到默认参数里有一项 slidesPerView: 3, 它的意思是，设置 slider 容器同时显示 slides 的数量，简单地说就是总宽度 swiper-wrapper 除以单个 swiper-slide 的宽度所得到的数值。

手机上自适应显示：

slidesPerView: "auto" //auto 自适应

我想应该是该效果下，对后面的 sliders 进行了缩放，宽度小于设置的宽度，才会显示多个。

我把 slidesPerView 的值设置为 2 ，就可以只显示3个了，您可以根据自己的情况进行设置。

还有一个问题，就是默认情况下，第一个是居中显示的，这样前面就会有一块空白。

怎么让它补齐空白，直接显示第二个呢？

我们可以用 initialSlide 属性，设定初始化时 slide 的索引。这里的数值是根据下标判断的，我们要直接显示第二个，可以将它的设置为 1 。

js中添加下面一行：

initialSlide: 1

coverflowEffect

cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数，可选值：

参数名	默认	描述
rotate	50	slide做3d旋转时Y轴的旋转角度
stretch	0	每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
depth	100	slide的位置深度。值越大z轴距离越远，看起来越小。
modifier	1	depth和rotate和stretch的倍率，相当于depthmodifier、rotatemodifier、stretch*modifier，值越大这三个参数的效果越明显。
slideShadows	true	是否开启slide阴影

Swiper 3D翻转效果总结

coverflowEffect