我的滑块覆盖流效果在 Ionic 4 中不起作用

Question

我正在使用我的 Ionic 4 应用程序，我已将 coverflow 效果添加到我的滑块，但它不起作用。

这是我的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,
    } 
  };

但是没有显示coverflow效果。显示的是简单效果滑块。

非常感谢任何帮助。

Answer 1

我参考这个Ionic documentation解决了。

你可以试试这个。

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

setTransition(duration) {
   duration = 2000;
}

Answer 2

我已经通过 Ionic 团队解决了 Github

试试这个可能对你有帮助：https://codepen.io/liamdebeasi/pen/vYYEwZM

我刚刚删除了这两行

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

我的滑块覆盖流效果在 Ionic 4 中不起作用

My coverflow effect for the slider is not working in Ionic 4

ionic-framework

ionic4