swiper.js 移动端触摸滑动插件

时间:2022-05-15 09:42:25

API链接:

http://www.swiper.com.cn/api/start/2014/1218/140.html

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="data:images/1.jpg"></div>
      <div class="swiper-slide"><img src="data:images/2.jpg"></div>
      <div class="swiper-slide"><img src="data:images/3.jpg"></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
  <script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
</body>

<script> 
var mySwiper = new Swiper ('.swiper-container', {
  direction: 'horizontal',
  loop: false,
  initialSlide:1, //初始化页面的索引
  // 如果需要分页器
  pagination: '.swiper-pagination',
  //3d翻页
  /*
  coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数,可选值:
  rotate:slide做3d旋转时Y轴的旋转角度。默认50。
  stretch:每个slide之间的拉伸值,越大slide靠得越紧。 默认0。
  depth:slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
  modifier:depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
  slideShadows:开启slide阴影。默认 true。
  */
  effect : 'coverflow',
  slidesPerView: 2,
  centeredSlides: true,
  coverflow: {
  rotate: 0,
  stretch: 50,
  depth: 60,
  modifier: 2,
  slideShadows : false
}
}) 
</script>