Swiper.js 分页自定义项目符号不会点击移动到下一张幻灯片

Question

点击 swiper.js 时自定义项目符号无法滑动。

我已经添加了配置属性

'clickable: true'

这是我的刷卡密码

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

Forked Stackblitz

github中还有a similar issue

Answer 2

对我来说这很有效：

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

Swiper.js 分页自定义项目符号不会点击移动到下一张幻灯片

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

html

javascript

angular

swiper.js