Стрелки Swiper из Swiper.js на JavaScript не работают при клике.

На чтение 3 мин Опубликовано 05.10.2024

Вопрос или проблема

Я использую библиотеку swiper.js, все ошибки в консоли исправлены, мой HTML и CSS правильно выровнены, стрелки отображаются, и я могу их настраивать. Но когда я нажимаю на них, чтобы слайд мог сработать, ничего не происходит, и кажется, что их даже нет.

function swiper() {
  const swiper = new swiper(".swiper", {
    // Дополнительные параметры
    modules: [Navigation],
    spaceBetween: 5,
    slidesPerView: 2,
    loop: true,
    freeMode: true,
    loopAdicionalSlides: 5,
    speed: 500,
    cssMode: true,
    enabled: true,
    observer: true,
    observeParents: true,

    // Навигационные стрелки
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },

    allowSlideNext: true,
    allowSlidePrev: true
  });

  const nextButton = document.querySelector(".swiper-button-next");
  const prevButton = document.querySelector(".swiper-button-prev");

  nextButton.addEventListener("click", () => {
    swiper.slideNext();
  });

  prevButton.addEventListener("click", () => {
    swiper.slidePrev();
  });
}

Я уже пробовал эти коды:

´´´js
cssMode: true,
enabled: true,
observer: true,
observeParents: true,


А также пытался создать событие onClick, но ничего не происходит

Ответ или решение

Проблема, с которой вы столкнулись, связана с неправильным использованием библиотеки Swiper.js. Давайте рассмотрим возможные причины и способы их решения.

Проверьте импорт библиотеки: Убедитесь, что вы правильно импортировали библиотеку Swiper.js и соответствующие модули (в вашем случае Navigation). Импорт может выглядеть как-то так:
```
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
```
Корректная инициализация Swiper: Вы используете конструкцию new swiper(...), экземляр класса должен быть с заглавной буквы. Правильный код будет:
```
const swiper = new Swiper(".swiper", {
 // Ваши параметры
});
```

Проверка наличия элементов: Убедитесь, что элементы ".swiper-button-next" и ".swiper-button-prev" действительно присутствуют в вашем HTML-коде. Пример:

<div class="swiper">
 <div class="swiper-wrapper">
   <div class="swiper-slide">Слайд 1</div>
   <div class="swiper-slide">Слайд 2</div>
   <div class="swiper-slide">Слайд 3</div>
 </div>
 <!-- Кнопки навигации -->
 <div class="swiper-button-next"></div>
 <div class="swiper-button-prev"></div>
</div>

Удалите лишние слушатели событий: У вас уже настроены кнопки навигации в конфигурации с помощью navigation: {}, поэтому нет необходимости добавлять обработчики событий addEventListener. Swiper сам управляет этими кнопками. Удалите следующие строки из вашего кода:
```
nextButton.addEventListener("click", () => {
 swiper.slideNext();
});

prevButton.addEventListener("click", () => {
 swiper.slidePrev();
});
```
Проверьте стили: Убедитесь, что ваши кнопки навигации не перекрываются другими элементами. Это можно сделать с помощью инструментов разработчика в вашем браузере. Если кнопки не кликабельны, возможно, у них установлен стиль pointer-events: none; или они находятся под другими элементами.
Убедитесь, что слово ‘loop’ правильно используется: Вы также задали loop: true, что нормально, но если у вас 2 слайда и вы хотите, чтобы они «петляли», вам нужно убедиться, что их количество позволяет это (например, 3 или больше слайдов).

Вот исправленная версия вашего кода:

function swiper() {
  const swiper = new Swiper(".swiper", {
    // Опциональные параметры
    modules: [Navigation],
    spaceBetween: 5,
    slidesPerView: 2,
    loop: true,
    freeMode: true,
    loopAdditionalSlides: 5,
    speed: 500,
    cssMode: true,
    observer: true,
    observeParents: true,

    // Кнопки навигации
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
  });
}

Надеюсь, эти подсказки помогут вам исправить проблему с неработающими кнопками Swiper. Если у вас остались вопросы или возникли новые проблемы, не стесняйтесь спрашивать!