javascript - swiper : swiper 的第二个实例未初始化
问题描述
在我的网站上,我无法初始化第二个 swiper 实例。第一个 Swiper 可以正常工作。第二个只是显示第一张幻灯片。
我已经尝试像某些人推荐的那样在超时中包装第二个实例。我也尝试过更改变量名称(如代码中所示)。
我究竟做错了什么?谢谢你的帮助!
代码如下所示:
<script>
const swiper1 = new Swiper('.s1', {
cssMode: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination'
},
mousewheel: true,
keyboard: true,
});
const swiper2 = new Swiper('.s2', {
cssMode: true,
navigation: {
nextEl: '.next-s2',
prevEl: '.prev-s2',
},
pagination: {
el: '.pagination-s2'
},
mousewheel: true,
keyboard: true,
});
</script>
.swiperSection {
width: 80%;
text-align: center;
margin: auto;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 100%;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: block;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: justify;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding-bottom: 1em
}
.swiper-slide p {
display: block;
}
.swiper-slide a {
color: #df1e25;
text-decoration: none;
cursor: pointer;
}
.quotes {
background-color: #000;
color: #fff;
text-align: center;
}
.quote-sign {
font-size: 7em;
font-family: serif;
color: #df1e25;
height: 110px;
margin-top: 1em;
}
.swiper-slide-black {
background-color: #000;
}
.quotes p {
font-size: 1em;
font-style: italic;
}
.quotes h6 {
color: #df1e25
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<div class="content">
<h1>[...]</h1>
<div class="swiperSection">
<div class="swiper-container s1">
<div class="swiper-wrapper" >
<div class="swiper-slide">
[...]
</div>
<div class="swiper-slide">
[...]
</div>
<div class="swiper-slide">
[...]
</div>
<div class="swiper-slide">
[...]
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-black"></div>
</div>
</div>
</div>
<div class="quotes">
<div class="quote-sign">“</div>
<div class="swiperSection">
<div class="swiper-container s2">
<div class="swiper-wrapper" >
<div class="swiper-slide swiper-slide-black">
[...]
</div>
<div class="swiper-slide swiper-slide-black">
[...]
</div>
<div class="swiper-slide swiper-slide-black">
[...]
</div>
<div class="swiper-slide swiper-slide-black">
[...]
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white nex1-s2"></div>
<div class="swiper-button-prev swiper-button-white prev-s2"></div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white pagination-s2"></div>
</div>
</div>
</div>
解决方案
我让它工作了(下)。我认为答案是您的第二个“下一步”按钮的标记中有错字。它目前nex1-s2
并且应该next-s2
与您在 JavaScript 中设置第二个幻灯片的内容相匹配。很容易错过,我只是在弄乱代码一段时间后才发现它。
const swiper1 = new Swiper('#s1', {
cssMode: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination'
},
mousewheel: true,
keyboard: true,
});
const swiper2 = new Swiper('#s2', {
cssMode: true,
navigation: {
nextEl: '.next-s2',
prevEl: '.prev-s2',
},
pagination: {
el: '.pagination-s2'
},
mousewheel: true,
keyboard: true,
});
.swiperSection {
width: 80%;
text-align: center;
margin: auto;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 100%;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: block;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: justify;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding-bottom: 1em
}
.swiper-slide p {
display: block;
}
.swiper-slide a {
color: #df1e25;
text-decoration: none;
cursor: pointer;
}
.quotes {
background-color: #000;
color: #fff;
text-align: center;
}
.quote-sign {
font-size: 7em;
font-family: serif;
color: #df1e25;
height: 110px;
margin-top: 1em;
}
.swiper-slide-black {
background-color: #000;
}
.quotes p {
font-size: 1em;
font-style: italic;
}
.quotes h6 {
color: #df1e25
}
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<body>
<div class="content">
<h1>[...]</h1>
<div class="swiperSection">
<div class="swiper-container" id="s1">
<div class="swiper-wrapper" >
<div class="swiper-slide">
[aaa]
</div>
<div class="swiper-slide">
[bbb]
</div>
<div class="swiper-slide">
[ccc]
</div>
<div class="swiper-slide">
[ddd]
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-black"></div>
</div>
</div>
</div>
<div class="quotes">
<div class="quote-sign">“</div>
<div class="swiperSection">
<div class="swiper-container" id="s2">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-black">
[eee]
</div>
<div class="swiper-slide swiper-slide-black">
[fff]
</div>
<div class="swiper-slide swiper-slide-black">
[ggg]
</div>
<div class="swiper-slide swiper-slide-black">
[hhh]
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white next-s2"></div>
<div class="swiper-button-prev swiper-button-white prev-s2"></div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white pagination-s2"></div>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- graph - 如何访问 Apollo 的 useMutaion 响应
- flutter - Flutter initState 和 dispose 在第一次构建期间调用了两次
- azure-cosmosdb - Cosmos 模拟器中未显示的文档
- rust - 使用 Serde 加载嵌套的 YAML/JSON 文档
- cpprest-sdk - cpprestsdk 客户端/服务器未返回 OK 状态
- javascript - 为什么每次更改后 NativeScript 8 Angular 都会刷新应用程序?
- html - CSS:标题全屏宽度,其他内容未包装
- mysql - Mysql Query Browser - 在其上设置和添加连接
- action - Google 操作不会更新智能设备上的调用
- kubernetes - Kubernetes 中如何使用 Istio Ingress 转发 RabbitMQ 的 STOMP 协议?