离子幻灯片在Ionic3中自动播放

Question

我在主页上使用离子幻灯片，但它不适用于自动播放。

离子代码：

    <ion-slides autoplay=300>
      <ion-slide  *ngFor = "let banners of bannersImage">
        <img src={{banners.image}}>
      </ion-slide>
    </ion-slides>

错误信息：

Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
    at autoplay (main.js:43827)
    at startAutoplay (main.js:43870)
    at initSwiper (main.js:43816)
    at Slides._initSlides (main.js:55290)
    at main.js:55311`enter code here`

Answer 1

我有解决方案：像这样做

<ion-slides *ngIf="slideData && slideData.length" autoplay="5000" class="slideroption" pager="true"   loop="true" speed="300">
      <ion-slide   *ngFor="let slide of slideData">
                <img src="{{slide.imag}}" />
          </ion-slide>
    </ion-slides>

Answer 2

file.ts

 ngAfterViewInit() {  setTimeout(()=>{
         if(this.topProducts && this.topProducts.length > 0){
            this.slides.freeMode = true;
              this.slides.autoplay = 2000;
              this.slides.speed = 500;
              this.slides.loop = true;
              this.slides.startAutoplay()
          }
          },1000)
        }

Answer 3

您错过了 autoplay 属性中的 ">，它应该是这样的：

<ion-slides autoplay="300">
  <ion-slide *ngFor="let banners of bannersImage">
    <img [src]="banners.image">
  </ion-slide>
</ion-slides>

顺便说一句，使用属性

时，最好使用属性绑定而不是插值：

[src]="banners.image"而不是src={{banners.image}}.