我是javascript的新手，我正在尝试实现卡片转盘。我遇到了用于滑块的Swiper插件，我想尝试一下。现在我在外部javascript文件中有一个问题，在其中初始化了Swiper，或者我认为是问题所在。我怀疑它没有正确加载，并且更改<script>标签的顺序可以解决问题，但是我没有不能确定，如果知道如何。
这是我的html标头标记：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<link rel="stylesheet" href="css\swiper.min.css">
<link rel="stylesheet" href="css\main.css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Roboto:400,400i,700&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/53b023e3b1.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.esm.bundle.js"></script>
<script src="js\script.js"></script>
<link rel="icon" href="icon/logo.png">
<title>Athena's Blog</title>
我的script.js文件：
$(document).ready(function(){
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,
observer: true,
observeParents: true
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
和最后我的HTML刷卡器：
<div class="swiper-container">
<div class="swiper-wrapper" th:each="category : ${categoryList}">
<div class="swiper-slide">
<img src="img/post1.jpg" class="card-img card-img-top" alt="art image">
<div class="card-img-overlay">
<p class="card-title" th:text="${category.title}"></p>
<p class="card-text" th:text="${category.description}">Art for everyone</p>
</div>
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
我正在使用Thymeleaf，并在一堆纸牌中显示表格的内容。我尝试了没有Thymeleaf且没有官方文档说的方式的滑动，仍然没有运气。
尽管设置为slidesPerView: 3,，但结果只是第一张幻灯片，并且导航按钮不起作用。任何帮助将不胜感激<3
经过大量更改，我最终使它生效。
对于那些可能遇到相同问题的人：
th:foreach循环。observer: true,和observeParents: true行：我的外部JS文件。然后，我尝试在代码上重新添加Thymeleaf循环，但是再次刷卡停止了工作。我搜索了一下，发现问题出在插件不知道DOM发生了更改。将以下代码添加到我的JS文件中可解决此问题。
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
I found it on this Stackoverflow question
希望对您有所帮助<3