如果只有一张幻灯片，则禁用 Swiper Slider

Question

我在网站上使用滑动滑块，如果只有一张幻灯片，我想将其禁用。

目前只有一张幻灯片会出现分页，您可以单击它或滑动。如果只有一张幻灯片，理想情况下不应有任何交互。

我现在的js是：

  var swiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: false,
    //autoplay: 6500,
    autoplayDisableOnInteraction: false,

    keyboardControl: true,
    mousewheelControl: true,

    pagination: '.swiper-pagination',
    paginationClickable: true,

  });

Answer 1

我也在寻找这样做的方法，但由于我没有找到任何“官方”方法来禁用滑动和隐藏寻呼机，我决定即兴发挥一下。

所以在你的脚本中，你可以在你的 Swiper 变量之后添加：

JS:

if($(".slider .slide").length == 1) {
    $('.swiper-wrapper').addClass( "disabled" );
    $('.swiper-pagination').addClass( "disabled" );
}

如果滑块中只有一张幻灯片，这会将 class disabled 添加到包装和分页中。您现在可以添加一些 CSS 来绕过 Swiper 效果：

CSS:

.swiper-wrapper.disabled {
    transform: translate3d(0px, 0, 0) !important;
}
.swiper-pagination.disabled {
    display: none;
}

请注意，这仅在循环设置为 false 时有效（就像您的情况一样）。如果循环处于活动状态，Swiper 将在您唯一的幻灯片前后添加幻灯片副本，总共制作 3 张相同的幻灯片。然后，您可以将 length == 1 更改为 length == 3。

希望对您有所帮助！

Answer 2

只需添加一个条件：

if ($('.swiper-container .swiper-slide').length > 1) {
  var swiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: false,
    //autoplay: 6500,
    autoplayDisableOnInteraction: false,

    keyboardControl: true,
    mousewheelControl: true,

    pagination: '.swiper-pagination',
    paginationClickable: true,

  });
}

Answer 3

其中一个选项是有条件地添加选项，如下所示：

    let options = {};

    if ( $(".swiper-container .swiper-slide").length == 1 ) {
        options = {
            direction: 'horizontal',
            loop: false,
            autoplayDisableOnInteraction: false,

            keyboardControl: true,
            mousewheelControl: true,

            pagination: '.swiper-pagination',
            paginationClickable: true,
        }
    } else {
        options = {
            loop: false,
            autoplay: false,
        }
    }

    var swiper = new Swiper('.swiper-container', options);

Answer 4

我建议使用带有新选项的更新刷卡功能，如下所示：

params.loop = false;
params.pagination = null;
swiper.update();

Params 是用于刷卡器初始化的对象。

谢谢！

Answer 5

an option in Swiper API 可能有用:

watchOverflow (boolean|false)
// When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding

Answer 6

好吧，我使用 $ionicSlides 可以很好地询问数组的长度，如果是 1 或更少，则获取 Swiper 实例并调用这些函数：

 $scope.$on("$ionicSlides.sliderInitialized", function (event, data) { 
    $scope.slider2 = data.slider;
      $scope.slider2.activeIndex = 0;

     if (vm.slidetext && vm.slidetext.length <= 1) {

        $scope.slider2.destroyLoop();
        $scope.slider2.stopAutoplay();
        $scope.slider2.lockSwipes();
      } 
}

但是这些功能是针对原生 Swiper 的，所以应该可以正常工作

Answer 7

只需检查您获得了多少张幻灯片：

const numberOfSlides = document.querySelectorAll('.swiper-slide').length;

如果只有一张幻灯片，则将 allowSlidePrev/allowSlideNext（或您想要阻止的任何内容）设置为 false：

const slider = new Swiper('.swiper-container', {

    allowSlidePrev:numberOfSlides === 1 ? false:true,
    allowSlideNext:numberOfSlides === 1 ? false:true

});

您还可以访问幻灯片集，因此您也可以 on/off 在您的活动中使用这些东西。例如在初始化中：

on: {
    init: function () {
        const numberOfSlides = this.slides.length;
        ...
    }
}

Answer 8

您可以检查幻灯片的数量，并添加 swiper-no-swiping class 以禁用滑动。这假设 noSwiping 保持为真（默认设置）[docs]

  // 1. Initialize Swiper
  var swiper = new Swiper('.swiper-container', {
    // Sample parameters
    direction: 'horizontal',
    loop: false,
    autoplayDisableOnInteraction: false,
    keyboardControl: true,
    mousewheelControl: true,
    pagination: '.swiper-pagination',
    paginationClickable: true,
  });


  swiper.on('init', function() {
     // 2. Get Slide count
     if (slider.slides.length <= 1) {
        // 3. Add swiper-no-swiping class
        document.querySelector('.swiper-container').classList.add('swiper-no-swiping')
     }
  });

Answer 9

swiper.allowTouchMove = 假；

Answer 10

简洁的解决方案：

var swiper = new Swiper('.swiper-container', {
    navigation: {
        prevEl: '.swiper-button-prev',
        nextEl: '.swiper-button-next',
    },
    on: {
        init: function () {
            if (this.slides.length <= 1) {
                // First way:
                this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
                this.el.querySelector(".swiper-button-prev").setAttribute('hidden', '');  // hiding arrows prev&next
                this.el.querySelector(".swiper-button-next").setAttribute('hidden', '');

                // Second way:
                // this.el.classList.add('swiper-no-swiping');
            }
        }
    }
});

Answer 11

CSS class 禁用时添加到导航按钮的名称

 disabledClass: 'disabled_swiper_button'

参考点击https://swiperjs.com/swiper-api#navigation

Answer 12

使用最新的swiper.js版本，您可以在选项中添加enabled: false。这将在禁用时隐藏所有导航元素并且不会响应任何事件和交互

在 API 文档中找到 documentation。

使用 v6.6.1

测试

举个例子

var items = ['slide1']

var options = {
 enabled: items.length > 1
}

如果只有一张幻灯片，则禁用 Swiper Slider

Disable Swiper Slider if only 1 slide

swiper