Javascript swiper:swiper的第二个实例未初始化

在我的网站上，我无法获得第二个swiper实例进行初始化。 第一个泳衣可以正常工作。第二张幻灯片只显示第一张幻灯片

我尝试过像一些人推荐的那样，在超时时间包装第二个实例。我还尝试更改变量名（如代码中所示）

我做错了什么？谢谢你的帮助

代码如下所示：

常量开关1=新开关（'.s1'{
是的，
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
分页：{
el:“.swiper分页”
},
鼠标轮：是的，
键盘：没错，
});
const swiper2=新的Swiper（“.s2”{
是的，
导航：{
nextEl:“.next-s2”，
prevEl:“.prev-s2”，
},
分页：{
el:“.pagination-s2”
},
鼠标轮：是的，
键盘：没错，
});

.swiperSection{
宽度：80%；
文本对齐：居中；
保证金：自动；
}
.swiper容器{
宽度：100%；
身高：100%；
}
.滑梯{
文本对齐：居中；
字号：18px；
背景：#fff；
宽度：100%；
/*将幻灯片文本垂直居中*/
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示：块；
-webkit盒包：中心；
-ms-flex-pack:center；
-webkit内容：中心；
辩护内容：辩护；
-webkit框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
垫底：1米
}
.滑梯滑梯{
显示：块；
}
.滑梯a{
颜色：#df1e25；
文字装饰：无；
光标：指针；
}
.引用{
背景色：#000；
颜色：#fff；
文本对齐：居中；
}
.报价符号{
字号：7em；
字体系列：衬线；
颜色：#df1e25；
高度：110px；
边缘顶部：1米；
}
.swiper幻灯片黑色{
背景色：#000；
}
.引文{
字号：1em；
字体：斜体；
}
.h6{
颜色：#df1e25
}

[...]
[...]
[...]
[...]
[...]
“
[...]
[...]
[...]
[...]

我让它工作起来了（如下）。我想答案是你的第二个“下一个”的标记中有一个输入错误按钮。它当前是

nex1-s2

，应该是

next-s2

，以匹配JavaScript中设置第二个幻灯片的内容。很容易错过，我只是在处理代码一段时间后才捕捉到它

const swiper1=新的Swiper（'s1'{
是的，
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
分页：{
el:“.swiper分页”
},
鼠标轮：是的，
键盘：没错，
});
const swiper2=新的Swiper（“#s2”{
是的，
导航：{
nextEl:“.next-s2”，
prevEl:“.prev-s2”，
},
分页：{
el:“.pagination-s2”
},
鼠标轮：是的，
键盘：没错，
})；

.swiperSection{
宽度：80%；
文本对齐：居中；
保证金：自动；
}
.swiper容器{
宽度：100%；
身高：100%；
}
.滑梯{
文本对齐：居中；
字号：18px；
背景：#fff；
宽度：100%；
/*将幻灯片文本垂直居中*/
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示：块；
-webkit盒包：中心；
-ms-flex-pack:center；
-webkit内容：中心；
辩护内容：辩护；
-webkit框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
垫底：1米
}
.滑梯滑梯{
显示：块；
}
.滑梯a{
颜色：#df1e25；
文字装饰：无；
光标：指针；
}
.引用{
背景色：#000；
颜色：#fff；
文本对齐：居中；
}
.报价符号{
字号：7em；
字体系列：衬线；
颜色：#df1e25；
高度：110px；
边缘顶部：1米；
}
.swiper幻灯片黑色{
背景色：#000；
}
.引文{
字号：1em；
字体：斜体；
}
.h6{
颜色：#df1e25
}

[...]
[aaa]
[bbb]
[ccc]
[ddd]
“
[eee]
[fff]
[ggg]
[hhh]