gpt4 book ai didi

javascript - 滑动 slider 。带循环的 SlideTo 方法

转载 作者:行者123 更新时间:2023-11-28 03:08:21 25 4
gpt4 key购买 nike

我需要 Swiper slider 方面的帮助.

调整大小时无法将 slider 设置到初始位置。方法“swiper.slideTo(0)”不起作用。
也许有人知道如何解决这个问题。非常重要的一点是,当 slider “事件”时,循环必须处于事件状态。
或者如何将循环参数设置为断点))。
我在 Vue 项目上使用 vanilla Swiper。

switchInitSwiper - 调整大小时完全重新初始化的包装器;
检查器 - 仅启用/禁用某些属性

let self = this;
this.$refs.viewedSlider._SLIDES_COUNT_ = this.$refs.viewedSlider.querySelectorAll('.shop-item');
let viewed = switchInitSwiper({query: '(max-width:0px)', element: this.$refs.viewedSlider, thinArrow: true}, {
spaceBetween: 0,
slidesPerView: 4,
loop: true,
navigation: {
nextEl: '.swiper-button-next.viewed',
prevEl: '.swiper-button-prev.viewed',
},
breakpoints,
on
});

let on = {resize: checker, init: checker};
let breakpoints = {
0: {slidesPerView: 1},
600: {slidesPerView: 2},
800: {slidesPerView: 3},
1100: {slidesPerView: 4}
};



function checker() {
let slider = null;
let currentPerView = this.passedParams.breakpoints[this.currentBreakpoint].slidesPerView;

if (this.el === self.$refs.viewedSlider) {
slider = self.$refs.viewedSlider;
} else if(this.el === self.$refs.similarSlider) {
slider = self.$refs.similarSlider;
}

if (currentPerView >= slider._SLIDES_COUNT_.length) {
this.el.parentElement.classList.add('disable-slider');
this.allowTouchMove = false;
this.allowSlideNext = false;
this.allowSlidePrev = false;

this.slideTo(0, 1000);// <------ this don`t work
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

console.log('O+_O');
} else {
this.el.parentElement.classList.remove('disable-slider');
this.allowTouchMove = true;
this.allowSlideNext = true;
this.allowSlidePrev = true;
}
console.log(this);
}

最佳答案

来自the documentation you linked to在你的问题中:

mySwiper.slideToLoop(index, speed, runCallbacks);

Does the same as .slideTo but for the case when used with enabled loop.

您正在使用 loop: true 进行实例化,因此请尝试 this.slideToLoop(0);

关于javascript - 滑动 slider 。带循环的 SlideTo 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60401044/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com