zoukankan      html  css  js  c++  java
  • swiper使用中一些点的总结

     最近做了PC端改版,要求移动端有更好的体验,一些产品滚屏的展示,就用了swiper插件,以方便用户在移动端访问可以滑动翻屏展示。

     本次项目中使用的是swiper2.0版本。

     首先要引入swiper的js库和css库(此处不做赘述)

     然后在此生成一个swiper实例,以供举例子

     var mySwiper = new Swiper('.swiperLookBig', {

      pagination: '.pagination',
      loop: true,
      paginationClickable: true
    });

    1.swipePrev()和swipeNext()方法,滑动到上一个模块/下一个模块

     比如我点击某按钮执行滑到上一模块,就可以这样写: 

     $('.arrow-left').live('click', function (e) {
      e.preventDefault();
      mySwiper.swipePrev(); 
     });

    2.setWrapperTranslate(x,y,z)   手动设置wrapper的位移

    比如我希望swiper向左便宜300px  我就可以这样写:

    mySwiper.setWrapperTranslate(-300,0,0); 我在项目中的实际应用是点击小图之后显示相对应的大图,我就计算一下小图对应的index,然后乘以一下大图每屏的宽度 然后来实现对应图片的展示。本来activeLoopIndex可实现,但是可能因为大图

    是默认隐藏的元素,对activeLoopIndex的计算不太准确,后来才尝试使用了此方法,效果还不错。

    3.activeLoopIndex : 在loop模式下返回当前活动块的索引。

     

      

      

  • 相关阅读:
    shell数组(产生不同的随机数)
    统计服务连接状况
    子网掩码与子网划分
    oracle 12g sqlplus安装
    MySQL的备份和还原
    mysql日志
    mysql用户和权限管理
    mysql show
    CentOS Linux解决Device eth0 does not seem to be present
    mysqldump命令详解(转载)
  • 原文地址:https://www.cnblogs.com/shimeng123/p/9519046.html
Copyright © 2011-2022 走看看