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模式下返回当前活动块的索引。

     

      

      

  • 相关阅读:
    24. Swap Nodes in Pairs
    49. Group Anagrams
    280. Wiggle Sort
    274. H-Index
    K Closest Numbers In Sorted Array
    Closest Number in Sorted Array
    Last Position of Target
    Classical Binary Search
    350. Intersection of Two Arrays II
    Sort Integers II
  • 原文地址:https://www.cnblogs.com/shimeng123/p/9519046.html
Copyright © 2011-2022 走看看