Swiper.js pagination custom bullet won't click to move to next slide

Issue

I can’t get the custom bullets to slide when clicked from swiper.js.

I’ve added the config property

‘clickable: true’

Here is my swiper code code

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,
};

Solution

It doesn’t work because you can’t click on them due to pointer-events: none css rule provided by the author of this Angular library:

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

The solution is to open it for any events:

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

Forked Stackblitz

There is also a similar issue in github

Answered By – yurzui

Answer Checked By – David Goodson (AngularFixing Volunteer)

Issue

Solution

Leave a Reply Cancel reply