Question

我使用iDangerous swiper创建一个简单的旋转木马。现在我希望动态显示上一个和下一个按钮。例如：如果启动滑块，则仅显示下一个按钮。如果单击，将显示下一个和上一个按钮，依此类推......

这是我到目前为止所尝试的：

        var pos = $(".swiper-wrapper").position();
        if (pos.left === 0){
            $(".arrow-right").css("display", "block");
            $(".arrow-left").css("display", "none");
        } else if (pos.right === 0) {
            $(".arrow-right").css("display", "none");
            $(".arrow-left").css("display", "block");
        } else if (pos.right > 0 && pos.left > 0) {
            $(".arrow-right").css("display", "block");
            $(".arrow-left").css("display", "block");
        }

我也一直试图将它包装成一个函数并在onClick

上调用它

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

Answer 1

更新Fiddle

将startpoint，first和last添加到html div元素。并在代码下添加了JQuery：

 if(this.className=='nxt'){
          $('.prv').show();
          var startpoint=$('.startpoint');
          startpoint.removeClass('startpoint');
          startpoint.next().addClass('startpoint');
          var endpoint=$('.endpoint');
          endpoint.removeClass('endpoint');
          endpoint.next().addClass('endpoint');

          if($('.last').attr('class')==$('.endpoint').attr('class')){
                $('.nxt').hide();
          }
 }
 if(this.className=='prv'){
          $('.nxt').show();
          var startpoint=$('.startpoint');
          startpoint.removeClass('startpoint');
          startpoint.prev().addClass('startpoint');
          var endpoint=$('.endpoint');
          endpoint.removeClass('endpoint');
          endpoint.prev().addClass('endpoint');

          if($('.first').attr('class')==$('.startpoint').attr('class')){
                          $('.prv').hide();
          }
  }

显示滑块prev＆amp;动态下一个按钮

1 个答案: