建站技术文档

将想法与热点信息与您一起分享

swiper pc端要添加几项配置移动端的时候不需要,怎么处理?

2024-06-04

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,
    },
  },});
                       


I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。