我在网站上使用滑动滑块，如果只有一张幻灯片，我希望将其禁用。
目前只有一张幻灯片会显示分页，您可以点击或滑动。如果只有一张幻灯片，理想情况下不应该有任何交互。
我现在的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,
});
【问题讨论】：
标签： swiper
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
【讨论】：
{zoom : true, watchOverflow: true}使用，可以显示可以缩放但不能滑动的图片。在放大的同时移动图片仍然有效。
使用最新的 swiper.js 版本，您可以在选项中添加 enabled: false。这将在禁用时隐藏所有导航元素并且不会响应任何事件和交互
在 API 文档 documentation 中找到。
用v6.6.1测试
这里是一个例子
var items = ['slide1']
var options = {
enabled: items.length > 1
}
【讨论】：
导航按钮禁用时添加的 CSS 类名
disabledClass: 'disabled_swiper_button'
【讨论】：
swiper.allowTouchMove = false;
【讨论】：
简洁的解决方案：
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');
}
}
}
});
【讨论】：
您可以检查滑动的数量，并添加swiper-no-swiping 类以禁用滑动。这假设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')
}
});
【讨论】：
只需检查您获得了多少张幻灯片：
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;
...
}
}
【讨论】：
对我来说，使用 $ionicSlides 可以很好地询问数组的长度，如果是一个或更少，则获取 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，所以应该可以正常工作
【讨论】：
我建议使用更新 swiper 功能和这样的新选项：
params.loop = false;
params.pagination = null;
swiper.update();
Params 是用于 swiper 初始化的对象。
谢谢！
【讨论】：
其中一个选项是有条件地添加选项，如下所示：
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);
【讨论】：
只需添加一个条件：
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,
});
}
【讨论】：
我也在寻找一种方法来做到这一点，但由于我没有找到任何“官方”方法来禁用滑动和隐藏寻呼机，我决定即兴发挥一点。
所以在你的脚本中，你可以在你的 Swiper 变量之后添加这个：
JS：
if($(".slider .slide").length == 1) {
$('.swiper-wrapper').addClass( "disabled" );
$('.swiper-pagination').addClass( "disabled" );
}
如果您的滑块中只有一张幻灯片，这会将 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。
希望这会有所帮助！
【讨论】：
transform: translate3d(0px, 0, 0) !important;和BAM