单击事件不会在第一张幻灯片 ion-slide 上触发

如何解决单击事件不会在第一张幻灯片 ion-slide 上触发

创建了一个带有 ion-slides 的滑块。但有时滑块的第一张和最后一张幻灯片不会触发点击事件。就像我们显示五张幻灯片一样：2,3,4 张幻灯片没有错误地触发事件，而在 1,4 中，它不会触发点击事件，也不会显示任何错误。

请给我解决方案。提前致谢

.html 文件

<ion-grid>
<ion-row>
  <ion-col size="12" class="p-0">
    <ion-slides pager="false" #slideWithNav
    (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)" class="pb-10">
      <ion-slide tappable *ngFor="let s of sliderOne.slidesItems" (click)="openModal(s)">
          <div>
            <h6 class="m-5 cardTtl">{{s.name}}</h6>
          </div> 
      </ion-slide>
    </ion-slides>
  </ion-col>
</ion-row>

.js 文件

let slides = document.querySelector('ion-slides');

const slideOpts = {
    grabCursor: true,centeredSlides: true,slidesPerView: 2.45,initialSlide: 1,pager: true,loop: true,autoplay:false,coverflowEffect: {
      rotate: 5,stretch: 0,depth: 100,modifier: 1,slideShadows: true,},pagination: {   
        el: '.swiper-pagination',on: {
      beforeInit() {
        const swiper = this;
        swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);
        swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
        swiper.params.watchSlidesProgress = true;
        swiper.originalParams.watchSlidesProgress = true;
      },setTranslate() {
        const swiper = this;
              const {
                width: swiperWidth,height: swiperHeight,slides,$wrapperEl,slidesSizesGrid,$
              } = swiper;
              const params = swiper.params.coverflowEffect;
              const isHorizontal = swiper.isHorizontal();
              const transform$$1 = swiper.translate;
              const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);
      
              const rotate = isHorizontal ? params.rotate : -params.rotate;
              const translate = params.depth;
              // Each slide offset from center
              for (let i = 0,length = slides.length; i < length; i += 1) {
                const $slideEl = slides.eq(i);
      
                const slideSize = slidesSizesGrid[i];
      
                const slideOffset = $slideEl[0].swiperSlideOffset;
      
                const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
      
                let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
                let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
                // var rotateZ = 0
                let translateZ = -translate * Math.abs(offsetMultiplier * 6.2);
                let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
                let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
      
                // Fix for ultra small values
                if (Math.abs(translateX) < 0.001) translateX = 0;
                if (Math.abs(translateY) < 0.001) translateY = 0;
                if (Math.abs(translateZ) < 0.001) translateZ = 0;
      
                if (Math.abs(rotateY) < 0.001) rotateY = 0;
                if (Math.abs(rotateX) < 0.001) rotateX = 0;
      
                const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      
                $slideEl.transform(slideTransform);
                $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
                if (params.slideShadows) {
                  // Set shadows
                  let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
                  let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
                  if ($shadowBeforeEl.length === 0) {
                    $shadowBeforeEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
                    $slideEl.append($shadowBeforeEl);
                  }
                  if ($shadowAfterEl.length === 0) {
                    $shadowAfterEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
                    $slideEl.append($shadowAfterEl);
                  }
                  if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
                  if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
                }
              }
  
         // Set correct perspective for IE10
        if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
          const ws = $wrapperEl[0].style;
          ws.perspectiveOrigin = `${center}px 50%`;
        }
      },setTransition(duration) {
        const swiper = this;
        swiper.slides
          .transition(duration)
          .find('.swiper-slide-shadow-top,.swiper-slide-shadow-right,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left')
          .transition(duration);
      }
    }
}

slides.options = slideOpts;

.ts 文件

constructor(public modalController: ModalController) {

     $.getScript('assets/js/slider.js');
     this.sliderOne =
         {
         isBeginningSlide: true,isEndSlide: false,slidesItems: [
             { id: 0,name: 'text1' },{ id: 1,name: 'text2' },{ id: 2,name: 'text3' },{ id: 3,name: 'text4' }
         ],};
   }

async openModal(s) {
    const modal = await this.modalController.create({
      component: SliderPage,componentProps: {
        titleName: s.name
      }
    });
    return await modal.present();
  }