Ich habe hier mit Swiper Ausgabe
Posted: 22 Aug 2025, 09:01
Entschuldigung, Leute, ich brauche Hilfe Ich benutze Swiper von CDN mit diesem Weg, aber die Materie -Navigationschaltflächen funktionieren nicht. Ich möchte die Lösung < /p>
`let itemsPerPage = getItemsPerPage();
function getItemsPerPage() {
if (window.innerWidth >= 1200) {
return 3;
} else if (window.innerWidth >= 768) {
return 2;
} else {
return 1;
}
`your text`
}
const swiper = new Swiper('.swiper-container', {
slidesPerView: getItemsPerPage(),
slidesPerGroup: getItemsPerPage(),
spaceBetween: 20,
loop: true,
speed: 5000,
effect: 'slide',
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
navigation: {
nextEl: '#nextPromoted',
prevEl: '#prevPromoted',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
simulateTouch: true,
followFinger: true,
touchRatio: 1,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 1,
},
1200: {
slidesPerView: 3,
slidesPerGroup: 1,
},
},
});
document.getElementById('nextPromoted').addEventListener('click', () => {
swiper.slideNext();
});
document.getElementById('prevPromoted').addEventListener('click', () => {
swiper.slidePrev();
});
//I Expect the Reason from autoplay because I tried this method before and it worked
let direction = 'next';
const move = () => {
if (direction === 'next') {
if (swiper.isEnd) {
direction = 'prev';
} else {
swiper.params.speed = 1500;
swiper.slideNext();
}
} else {
if (swiper.isBeginning) {
direction = 'next';
} else {
swiper.params.speed = 1500;
swiper.slidePrev();
}
}
setTimeout(move, 2000);
};
move();
document.getElementById('nextPromoted').addEventListener('click', () => {
swiper.params.speed = 1500;
swiper.slideNext();
direction = 'next';
});
document.getElementById('prevPromoted').addEventListener('click', () => {
swiper.params.speed = 1500;
swiper.slidePrev();
direction = 'prev';
});`
< /code>
Aber ich möchte die Navigation funktionieren lassen. Auch wenn der Schwebeprozess abgeschlossen ist, hört er nicht mehr zu bewegen. Das Wichtigste ist, die Navigation mit dem ersten Code zu beheben, da es sich um den endgültigen Code handelt.
`let itemsPerPage = getItemsPerPage();
function getItemsPerPage() {
if (window.innerWidth >= 1200) {
return 3;
} else if (window.innerWidth >= 768) {
return 2;
} else {
return 1;
}
`your text`
}
const swiper = new Swiper('.swiper-container', {
slidesPerView: getItemsPerPage(),
slidesPerGroup: getItemsPerPage(),
spaceBetween: 20,
loop: true,
speed: 5000,
effect: 'slide',
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
navigation: {
nextEl: '#nextPromoted',
prevEl: '#prevPromoted',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
simulateTouch: true,
followFinger: true,
touchRatio: 1,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 1,
},
1200: {
slidesPerView: 3,
slidesPerGroup: 1,
},
},
});
document.getElementById('nextPromoted').addEventListener('click', () => {
swiper.slideNext();
});
document.getElementById('prevPromoted').addEventListener('click', () => {
swiper.slidePrev();
});
//I Expect the Reason from autoplay because I tried this method before and it worked
let direction = 'next';
const move = () => {
if (direction === 'next') {
if (swiper.isEnd) {
direction = 'prev';
} else {
swiper.params.speed = 1500;
swiper.slideNext();
}
} else {
if (swiper.isBeginning) {
direction = 'next';
} else {
swiper.params.speed = 1500;
swiper.slidePrev();
}
}
setTimeout(move, 2000);
};
move();
document.getElementById('nextPromoted').addEventListener('click', () => {
swiper.params.speed = 1500;
swiper.slideNext();
direction = 'next';
});
document.getElementById('prevPromoted').addEventListener('click', () => {
swiper.params.speed = 1500;
swiper.slidePrev();
direction = 'prev';
});`
< /code>
Aber ich möchte die Navigation funktionieren lassen. Auch wenn der Schwebeprozess abgeschlossen ist, hört er nicht mehr zu bewegen. Das Wichtigste ist, die Navigation mit dem ersten Code zu beheben, da es sich um den endgültigen Code handelt.