Ionic 4 Slider автозапуск - PullRequest
Новая
       28

Ionic 4 Slider автозапуск

3 голосов
/ 12 апреля 2019

Я хочу автоматически сдвинуть ионный слайдер, но он не работает.слайдер также содержит изображения.данные получены из вызова API. 

  <ion-slides  autoplay="5000" loop="true" speed="300" pager="true" >
        <ion-slide *`ngFor`="let item of topStories">
            <ion-card (click)=" this.newsService.onGoToTopStoryPage(item)">
                <ion-card-content >
                    <ion-img [src] = "item.image"></ion-img>
                    <h2> <b>{{item.title}} </b></h2>
                    <h4>{{item.summary}}</h4>
            </ion-card-content>
            </ion-card>
        </ion-slide>
       </ion-slides>

Ответы [ 2 ]

2 голосов
/ 28 апреля 2019

Не используйте ion-img. Это показывает сломанное изображение для следующих слайдов в первый раз. Используйте <img>, как показано ниже.

Примечание: Ионная команда разработала ion-img для ion-virtual-scroll.

.ts 

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

  slideOptions = {
    initialSlide: 1,
    speed: 400,
  };

  constructor() { }

  slidesDidLoad(slides: IonSlides) {
    slides.startAutoplay();
  }

.html 

<ion-slides [options]="slideOptions" pager="true" #slider (ionSlidesDidLoad)="slidesDidLoad(slider)">
        <ion-slide *ngFor="let img of data?.images">
          <img [src]="img">
        </ion-slide>
      </ion-slides>
1 голос
/ 12 апреля 2019

Попробуйте, это может работать в вашем приложении: 

settings the options autoplay to true

slideOptsOne = {
 initialSlide: 0,
 slidesPerView: 1,
 autoplay:true
};

page.html 

<ion-slides [options]="slideOptsOne">
 <ion-slide *`ngFor`="let item of topStories">
   <ion-card (click)=" this.newsService.onGoToTopStoryPage(item)">
     <ion-card-content>
       <ion-img [src]="item.image"></ion-img>
       <h2> <b>{{item.title}} </b></h2>
       <h4>{{item.summary}}</h4>
     </ion-card-content>
   </ion-card>
 </ion-slide>
</ion-slides>

Добавьте вашу конфигурацию в настройках в файле page.ts. Дайте мне знать, работает это или нет.

...