未加载 Swiper JS 滑块外部 javascript 文件

Question

我是 javascript 的新手，我正在尝试实现卡片轮播。我偶然发现了用于滑块的 Swiper 插件，我想尝试一下。现在我遇到外部 javascript 文件的问题，其中正在初始化 Swiper 或者我认为 problem.I 怀疑它没有正确加载并且更改 <script> 标签的顺序会解决了这个问题，但我不确定，如果可以的话如何解决。

这是我的 html header 标签：

<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 并在一堆卡片中显示 table 的内容。我尝试了没有 Thymeleaf 的 swiper 和官方文档所说的方式，但仍然没有成功。

尽管设置 slidesPerView: 3, 结果只是第一张幻灯片，导航按钮不起作用。任何帮助将不胜感激 <3

Answer 1

经过大量更改后，我最终使其工作。

对于那些可能遇到同样问题的人：

我删除了 swiper CDN 和相关代码，并确保我的外部 JS 文件正在正确加载。
我尝试了新的 CDN URL 并删除了 Thymeleaf th:foreachloop。
我从中删除了 observer: true, 和 observeParents: true 行我的外部 JS 文件。

然后我尝试在代码中添加 Thymeleaf 循环，但 swiper 再次停止工作。我搜索并发现问题出在插件没有意识到 DOM 发生的变化。将以下代码添加到我的 JS 文件中解决了问题。

function reinitSwiper(swiper) {
  setTimeout(function () {
  swiper.reInit();
  }, 500);
}

I found it on this Whosebug question

希望对您有所帮助 <3

未加载 Swiper JS 滑块外部 javascript 文件

Swiper JS slider external javascript file is not being loaded

html

javascript

jquery

swiper

swiperjs