如果只有1张幻灯片,请禁用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 API 中有一个可能有用的选项：

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

Answer 2

我一直在寻找一种方法,但由于我没有找到任何"官方"方式来禁用滑动并隐藏寻呼机,我决定即兴发挥.

因此,在您的脚本中,您可以在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 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

只需添加一个条件：

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;

然后，如果只有一张幻灯片，请将 allowedSlidePrev/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;
        ...
    }
}