swiper 循环滑动问题

swiper滑到最后一屏可以继续滑动切换到第一屏,我知道有loop这个模式,现在要实现的效果是:比如左右滑动,效果和有loop:true的效果一样,不过就是第一屏不能右滑。请问怎么实现?

阅读 15.9k
2 个回答
var swiper = new Swiper('.swiper-container');

第一屏不能右划, 默认配置就可以实现啊

loop:true; 同时首页不能向右划:

var swiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        onTouchMove: function(swiper){
          if(swiper.activeIndex == 1){
            swiper.lockSwipeToPrev();
          }else{
            swiper.unlockSwipeToPrev();
          }
        }
    });

需要在源码中加两行代码进行判断,分别是move移动时的禁止移动与end结束时的禁止跳转;
(代码不能加粗 具体看有注释的那行)

1.查swipe源码里的move函数,其中有一个判断:

if (options.continuous) { 
          if(delta.x > 0 && index==0){return false}//加上这行
          translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0);
          translate(index, delta.x + slidePos[index], 0);
          translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0);

        } else {

2.查swipe源码里的end函数,其中有一个判断:

if (direction) {
            if (options.continuous) { 

              move(circle(index-1), -width, 0);
              move(circle(index+2), width, 0);

            } else {
              move(index-1, -width, 0);
            }

            move(index, slidePos[index]-width, speed);
            move(circle(index+1), slidePos[circle(index+1)]-width, speed);
            index = circle(index+1);

          } else if(index!=0){  //源码中是else 此处需要加判断index!=0
            if (options.continuous) {

              move(circle(index+1), width, 0);
              move(circle(index-2), -width, 0);

            } else {
              move(index+1, width, 0);
            }

            move(index, slidePos[index]+width, speed);
            move(circle(index-1), slidePos[circle(index-1)]+width, speed);
            index = circle(index-1);

          }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题