Enable/Disable 动态滑动 (touch/mouse)

Question

我有一个页面有一个问题和 4 个答案，刷卡器效果很好，我可以转到下一个问题然后返回。我想要的是在按下答案之前禁止滑动到下一个问题。我成功地用 $scope 变量和 ng-show 隐藏了 'next' 箭头，但是即使每次我按下答案时使用新的禁用选项调用 initSwiper 函数后，使用 touch/mouse 的滑动仍然有效。这可能吗？这是当前非常有效的 initSwiper 函数。

$scope.initSwiper = function() {
        var swiper = new Swiper('.swiper-container', {
            // Navigation arrows
            nextButton : '.swiper-button-next',
            slideToClickedSlide : true,
            onSlideChangeStart : function(swiper) {
                $scope.index = swiper.activeIndex;
                setExplanation($scope.index);
                $scope.$apply();
                $scope.test = $scope.tests[$scope.index];
                swiper.lockSwipeToPrev();
            }
        }); 
    }

我在按下答案后调用的另一个初始化函数就像这样，我只将这个swiper.lockSwipeToNext()添加到onSlideChangeStart: function。

Answer 1

您可以在初始化 Swiper 时尝试使用 noSwipingClass 选项并使用 $scope 有条件地应用 css class 例如 no-answer-yet到 Swiper 幻灯片。所以像：

$scope.initSwiper = function() {
    var swiper = new Swiper('.swiper-container', {
      ...,
      noSwipingClass: "no-answer-yet",
    }); 
}

Enable/Disable 动态滑动 (touch/mouse)

Enable/Disable swiper dynamically (touch/mouse)

angularjs

swiper