Swiper JS slider external javascript file is not being loaded

Question

I'm new with javascript and I was trying to implement a card carousel. I came upon Swiper plugin for sliders and I thought I give it a try. now I have a problem with external javascript file where Swiper is being initialized in it or I think that's the problem.I suspect it's not being loaded properly and that changing the order of the <script> tags would solve the problem, but I don't know for sure and if so how.

here's my html header tag:

<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>

My script.js file:

    $(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',
    },
  });
});

and the last my html swiper:

<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>

I am using Thymeleaf and displaying the content of a table in a bunch of cards. I tried swiper without Thymeleaf and the way the official docs said and still no luck.

despite setting slidesPerView: 3, the result is just the first slide, and the nav buttons are not working. any help would be much appreciated <3

score 0 · Accepted Answer · answered Feb 24 '20 at 07:05

After a lot of changes I eventually made it work.

For those of you who may have the same issue:

I deleted swiper CDNs and related codes and made sure my external JS file is being loaded correctly.
I tried new CDN URLs and removed the Thymeleaf th:foreachloop.
I removed the observer: true, and observeParents: truelines from my external JS file.

Then I tried to add Thymeleaf loop back on the code, but again swiper stopped working. I searched and found out the problem is with the plugin not being aware of the change that occurred to the DOM. adding the following code to my JS file fixed the problem.

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

I found it on this Stackoverflow question

Hope it was helpful <3

Swiper JS slider external javascript file is not being loaded

1 Answers1