Swiper JS слайдер внешний javascript файл не загружается - PullRequest
Новая
       82

Swiper JS слайдер внешний javascript файл не загружается

0 голосов
/ 23 февраля 2020

Я новичок с 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 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>

Я использую Thymeleaf и отображаю содержимое таблицы в связке карт. Я попробовал swiper без Thymeleaf и того, как сказали официальные документы, но все равно не повезло.

, несмотря на настройку slidesPerView: 3,, в результате получается только первый слайд, а кнопки навигации не работают. любая помощь будет высоко ценится <3 </p>

1 Ответ

0 голосов
/ 24 февраля 2020

После многих изменений я в конечном итоге заставил его работать.

Для тех из вас, у кого может быть такая же проблема:

  1. Я удалил CDN-файлы swiper и соответствующие коды и убедился, мой внешний JS файл загружается правильно.
  2. Я попробовал новые URL CDN и удалил Thymeleaf th:foreach l oop.
  3. Я удалил observer: true, и observeParents: true строки из моего внешнего JS файла.

Затем я попытался добавить Thymeleaf l oop обратно в код, но снова swiper перестал работать. Я искал и обнаружил, что проблема в том, что плагин не знает об изменениях, произошедших в DOM. добавление следующего кода в мой файл JS устранило проблему. 

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

Я нашел его в этом вопросе Stackoverflow

Надеюсь, это было полезно <3 </p>

...