Пользовательская маркер разбивки на страницы Swiper.js не щелкает, чтобы перейти к следующему слайду

Question

Я не могу заставить пользовательские пули скользить при нажатии из swiper.js.

Вот мой стекблиц

Я добавил свойство конфигурации

'clickable: true'

Вот мой код swiper

private pagination: SwiperPaginationInterface = {
  el: '.swiper-pagination',
  type: 'bullets',
  clickable: true,
  renderBullet: function(index, className) {
    return '<span class="' + className + '">' + (index === 0 ? 'info ' : 'students') + '</span>';
  },
};
config: SwiperConfigInterface = {
  observer: true,
  observeParents: true,
  observeSlideChildren: true,
  direction: 'horizontal',
  threshold: 50,
  spaceBetween: 0,
  slidesPerView: 1,
  centeredSlides: true,
  slideToClickedSlide: true,
  pagination: this.pagination,
  navigation: true,
  // width: 200,
  // setWrapperSize: true,
};

Answer 1

Это не работает, потому что вы не можете нажать на них из-за pointer-events: none css, предоставленное автором этой библиотеки Angular:

swiper>.swiper.s-wrapper .swiper-pagination {
    pointer-events: none;
}

Решение - открывать его для любых событий:

:host >>> .swiper-pagination {
  pointer-events: all !important;
}

Разветвленный Stackblitz

Существует также аналогичная проблема в GitHub

Answer 2

Для меня это сработало:

      public config: SwiperOptions = {
  pagination: {
   el: '.swiper-pagination',
   clickable: true
  }
}