zoukankan      html  css  js  c++  java
  • swiper.js 移动端触摸滑动插件

    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="images/1.jpg"></div>
          <div class="swiper-slide"><img src="images/2.jpg"></div>
          <div class="swiper-slide"><img src="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>

  • 相关阅读:
    ffmpeg full help
    docker 服务命令
    php 查看swoole版本
    vue/cli 的启动
    TP框架的使用,不需要阿帕奇
    mysql 的文件恢复
    mac下使用iterm实现自动登陆
    跨库怎样查询
    swoole和websocket的关系
    mac上mysql的安装和使用
  • 原文地址:https://www.cnblogs.com/biglion/p/5977298.html
Copyright © 2011-2022 走看看