我编写的所有Swiper滑块均无法运行且不显示，请求技术排查

你的代码里存在几处语法和使用错误，直接导致滑块失效，具体问题和修正方案如下：

错误1：Swiper构造函数首字母未大写 #

Swiper是官方提供的构造函数，必须首字母大写，你代码里所有new swiper(...)的写法都要改成new Swiper(...)。

错误2：选择器语法错误 #

• 第二个滑块的容器选择器.swiper team-slid写法错误：如果元素同时拥有swiper和team-slid两个类，要写成.swiper.team-slid；如果是swiper容器下的team-slid元素，要写成.swiper .team-slid，根据命名习惯，建议改成符合你HTML结构的正确选择器。
• 分页器选择器.swiper-slid box错误：这里缺少类选择器的.，如果是swiper-slid容器下的box类元素，要写成.swiper-slid .box；更规范的做法是使用Swiper默认的.swiper-pagination类作为分页器选择器。

修正后的完整代码 #

// Swiper slider 2
var projectSwiper = new Swiper(".project-slider", {
  slidesPerView: 1,
  spaceBetween: 30,
  pagination: {
    el: ".project-slider .swiper-pagination",
    clickable: true,
  },
  navigation: {
    prevEl: ".project-slider .swiper-button-prev",
    nextEl: ".project-slider .swiper-button-next",
  },
  breakpoints: {
    640: {
      slidesPerView: 1,
      spaceBetween: 20,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 40,
    },
    1024: {
      slidesPerView: 2,
      spaceBetween: 50,
    },
  },
});
// End Swiper slide 2

// swiper slid
var teamSwiper = new Swiper(".swiper.team-slid", {
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: ".swiper.team-slid .swiper-pagination",
    clickable: true,
  },
});
// End swiper slide

额外注意：

• 要确保已正确引入Swiper的CSS和JS文件，顺序是先引入CSS，再引入JS，最后执行初始化代码。
• 避免变量名重复，两个滑块用不同的变量名（比如projectSwiper和teamSwiper），防止变量被覆盖。

内容的提问来源于stack exchange，提问作者Timothy joseph