首页 > 解决方案 > 我的滑块覆盖流效果在 Ionic 4 中不起作用

问题描述

我在我的 Ionic 4 应用程序中工作,我已将封面流效果添加到我的滑块中,但它不起作用。

这是我的tab1.page.html

<ion-slides class="swiper-container swiper-container-3d" pager="false" [options]="slidesOpts" #slides>
    <ion-slide class="swiper-wrapper">
    </ion-slide>

    <ion-slide class="swiper-wrapper">
    </ion-slide>

   <ion-slide class="swiper-wrapper">
   </ion-slide>

   <ion-slide class="swiper-wrapper">
   </ion-slide>

</ion-slides>

这是我的tab1.page.ts

import { IonSlides } from '@ionic/angular';

@ViewChild('slides') slides: IonSlides;
  slidesOpts = {
    effect: 'coverflow',
    spaceBetween: 0,
    initialSlide: 1,
    slidesPerView : 2.6,
    slidesOffsetBefore: 11,
    slidesOffsetAfter: 11,
    direction: 'horizontal',
    centeredSlides: true,
    coverflowEffect: {
     rotate: 20,
     stretch: 20,
     depth: 200,
     shadow: true,
     slideShadows: true,
     shadowOffset: 20,
     modifier: 1,
    } 
  };

但它没有显示覆盖流效果。它正在显示简单的效果滑块。

任何帮助深表感谢。

标签: ionic-frameworkionic4

解决方案


我已经通过参考这个Ionic 文档解决了。

你可以试试这个。

并且如下所述更改持续时间,

setTransition(duration) {
   duration = 2000;
}

推荐阅读