1. 在初始化Swiper时,可以根据不同的环境(PC端或移动端)来设置不同的配置项,例如:
let swiperConfig = {};if (isPC) {
swiperConfig = {
slidesPerView: 3,
spaceBetween: 30,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
};} else {
swiperConfig = {
slidesPerView: 1,
spaceBetween: 0,
};}const swiper = new Swiper('.swiper-container', swiperConfig);2. 也可以使用Swiper的responsive配置,根据不同的屏幕宽度设置不同的配置项,例如:
const swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1,
spaceBetween: 0,
},
// when window width is >= 480px
480: {
slidesPerView: 2,
spaceBetween: 20,
},
// when window width is >= 640px
640: {
slidesPerView: 3,
spaceBetween: 30,
},
},});

