Чтобы заставить Swiper подтягивать кастомные кнопки навигации автоматически, вам понадобится следующий подход:
1. Создайте HTML-разметку для кастомных кнопок навигации. Например, добавьте две кнопки с классами swiper-button-prev
и swiper-button-next
для предыдущего и следующего слайдов соответственно:
<div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>
2. В вашем JavaScript-коде инициализируйте Swiper и укажите созданные кнопки в опции navigation
. Для этого вы можете использовать селекторы CSS для выбора кнопок. Например:
var swiper = new Swiper('.swiper-container', { navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next', }, });
Этот код найдет элементы с классами .swiper-button-prev
и .swiper-button-next
и автоматически свяжет их с соответствующими функциями навигации Swiper.
3. Дополнительно, вы можете добавить стили для кастомных кнопок навигации. Например:
.swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background-color: #000; color: #fff; font-size: 24px; text-align: center; line-height: 50px; cursor: pointer; } .swiper-button-prev { left: 10px; } .swiper-button-next { right: 10px; }
В этом примере мы просто добавили некоторые базовые стили для кнопок, вы можете настроить их как вам нужно.
В результате, Swiper будет использовать ваши кастомные кнопки навигации для перемещения между слайдами.