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" );
}

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

<强> CSS：

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

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

希望这会有所帮助！

Answer 2

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

    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 3

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 4

只需添加一个条件：

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 5

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

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

});

您还可以访问幻灯片的集合，因此您也可以在活动中打开/关闭这些操作。以init为例：

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

Answer 6

我建议使用更新swiper功能，使用这样的新选项：

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

Params是swiper初始化时使用的对象。

谢谢！

Answer 7

对我来说，使用$ ionicSlides可以很好地询问数组的长度，如果等于或小于一个，则获取Swiper实例并调用以下函数：

timestamp

但是这些功能是针对本地Swiper的，因此应该可以正常工作

Answer 8

您可以检查幻灯片的数量，并添加click类以禁止滑动。假设#infoError { margin-bottom: 10px; }保持为真（默认设置）[docs]

swiper-no-swiping

Answer 9

简洁的解决方案：

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 10

当导航按钮被禁用时添加到导航按钮的 CSS 类名

 disabledClass: 'disabled_swiper_button'

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

Answer 11

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

在 API 文档 documentation 中找到。

使用 v6.6.1 测试

这里有一个例子

var items = ['slide1']

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

Answer 12

swiper.allowTouchMove = false;

如果只有1张幻灯片，请停用Swiper Slider

12 个答案: