我在网站上使用滑动滑块，如果只有一张幻灯片，我希望将其禁用。
目前只有一张幻灯片会出现分页，您可以单击或滑动。理想情况下，如果只有一张幻灯片，则不应有任何交互。
我现在的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 API 中有一个选项可能有用：
watchOverflow (boolean|false)
// When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding
因此，在您的脚本中，您可以在 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。希望这会有所帮助！
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,
});
}
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;
...
}
}
autoplay
或
loop设置的某些组合发生冲突，因此这里解决了这个问题，将所有内容都保留在初始化调用中：
const heroSlider = new Swiper('#hero-slider .swiper', {
loop: true,
watchOverflow: true,
autoplay: {
delay: 4000,
},
speed: 500,
navigation: {
nextEl: '#hero-slider .swiper-button-next',
prevEl: '#hero-slider .swiper-button-prev',
},
on: {
beforeInit() {
const slides = this.el.querySelectorAll('.swiper-slide');
if (slides) {
this.params.loop = slides.length > 1;
this.params.autoplay.enabled = slides.length > 1;
}
},
},
});
如果我们只有一张幻灯片，上面显示没有导航控件并禁用自动循环，从而有效地禁用滑动器 - 否则显示控件并自动循环像往常一样启动。我们在这里使用绕过 DOM 的方式来计算幻灯片数，而不是通过 Swiper-API，因为后者此时并不可靠 - 也不是在 init
上（对于单个幻灯片，
this.slides.length提供
0）在
beforeInit（毫不奇怪）和
3onInit 上，因为
loop: true的初始默认设置似乎会在我们只有 1 张幻灯片时产生幻灯片重复项等）。长话短说：对我有用！
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');
}
}
}
});
params.loop = false;
params.pagination = null;
swiper.update();
Params 是用于 swiper 初始化的对象。
谢谢！
swiper-no-swiping
类以禁用滑动。这假设
noSwiping保持为 true（默认设置）[文档]
// 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')
}
});
enabled: false
添加到选项中。当禁用时，这将隐藏所有导航元素并且不会响应任何事件和交互在 API 文档
文档中找到。
使用v6.6.1
var items = ['slide1']
var options = {
enabled: items.length > 1
}
watchOverflow (boolean|false)
// When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding
// detect sliders
if (swiper.slides.length === 1) {
// Disable Swiper (if it was enabled). When Swiper is disabled, it will hide all navigation elements and won't respond to any events and interactions
swiper.disable();
}
on: {
slideChange: function () {
if (this.slides.length === 1) {
this.allowSlidePrev = false;
this.allowSlideNext = false;
} else {
this.allowSlidePrev = true;
this.allowSlideNext = true;
}
}
}
init
，因为它不能与
beforeInit一起使用。非常有用，否则我们不知道如何修改选项：您可以使用
console.log(this.params);
var swiper2 = new Swiper(".slider-large", {
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
keyboard: {
enabled: true,
},
thumbs: {
swiper: swiper,
},
loop: false,
lazy: true,
watchOverflow: true,
on: {
init() {
// check number of slides
const slides_length = this.slides.length;
// check parameters before change
console.log(this.params);
if (slides_length === 1) {
// examples, do what what you want, some examples
this.params.allowTouchMove = false;
this.params.keyboard.enabled = false;
this.params.watchOverflow = false;
this.params.enabled = false;
}
// check if parameters has been modified
console.log(this.params);
},
// not asked : if you want to know the current index
slideChange: function () {
swiper2activeIndex = this.activeIndex; // get current slide's index
console.log(swiper2activeIndex);
},
}
});
$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 的，所以应该可以正常工作