Question

从swiper.js单击时，我无法使自定义项目符号滑动。

我添加了config属性

'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

该操作无效，因为由于该Angular库的作者提供的import React, { useState } from 'react'; const CardTradeSim = (props) => { const [ObtenerdataETH, setObtenerdataETH] = useState([]); const [ObtenerdataBTC, setObtenerdataBTC] = useState([]); const [ObtenerdataXRP, setObtenerdataXRP] = useState([]); const DevuelveValorCrypto = testing => { console.log("check received: ", testing) const TipoCrypto = testing; let test123 = ObtenerdataETH.price console.log("check received: valor de test123", test123) } return <DIV> bla bla {DevuelveValorCrypto({})} </DIV> }; css规则，您无法单击它们：

pointer-events: none

解决方案是针对任何事件将其打开：

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

Forked Stackblitz

github中也有a similar issue

Swiper.js分页自定义项目符号将不会单击以移至下一张幻灯片

1 个答案: