Как сделать переключение слайдов при клике на метку?

Question

[struhovv]

Как реализовать дополнительную пагинацию к swiper? Подразумевается, что это будет картинка с метками. При клике на метку swiper переключается на нужный слайд. При переключении слайда в swiper, загорается соответствующая метка.

Comments

[edward_freedom]

если верить офф докам, то достаточно вызвать функцию
swiper.slideNext();

[Юрий]

edward_freedom, скорее slideTo с нужным индексом.

Answer 1

[0xD34F]

Во-первых, перестаньте заниматься некрофилией - актуальная версия swiper'а седьмая, а не третья.

Во-вторых.

swiper.on('slideChange', ({ activeIndex }) => {
  document.querySelectorAll('.points .point').forEach((n, i) => {
    n.classList.toggle('active', i === activeIndex);
  });
})

document.querySelector('.points').addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('point')) {
    swiper.slideTo([...t.parentNode.children].indexOf(t));
  }
});

А вообще,...

...если пытаетесь реализовать кастомную пагинацию, то среди настроек swiper'а есть такие, которые предназначены как раз для этого:

pagination: {
  el: '.points',
  bulletClass: 'point',
  bulletActiveClass: 'active',
  renderBullet: (index, className) => `<div class="${className}">${index + 1}</div>`,
  clickable: true,
},