Как заставить Swiper подтягивать кастомные кнопки навигации автоматически?

Question

[photosho]

Знаю вариант в событии "onSwiper" сохранять объект слайдера и потом при нажатии на кнопку навигации вызывать "swiper.slidePrev()" / "swiper.slideNext()" - тогда любые элементы на странице можно использовать как такие кнопки. Но в том случае, когда слайдер загружается по Ajax, придется заново инициализировать все события. Может быть, все-таки, есть способ заставить swiper автоматически подтягивать такие кнопки?

Либо, второй вариант - по "onClick" прямо в разметке задавать "slidePrev()" / "slideNext()", но в этом случае непонятно, как определить объект слайдера, относящийся к выбранному элементу "swiper-container".

Answer 1

[leeroyjenkins176]

C помощью параметров при инициализации свайпера

// Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

Либо с помощью методов

const swiper = new Swiper('.swiper', {
// ...
})

document.querySelectorAll('.my-swiper-btn').forEach(btn => {
btn.addEventListener('click', swiper.slideNext)
})