Блог

Главная - Вопросы по программированию - Автозапуск слайдера Ionic 4

Автозапуск слайдера Ionic 4

#angular #ionic-framework #slider #ionic4 #autoplay

#angular #ionic-фреймворк #слайдер #ionic4 #автоматическое воспроизведение

Вопрос:

Я хочу автоматически перемещать ионный слайдер, но он не работает. слайдер также содержит изображения. данные получены из вызова 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>

Ответ №1:

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

 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>

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

Комментарии:

1. автозапуск: true отсутствует в документе ionicframework.

Ответ №2:

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

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

.ts

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

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

  constructor() { }

  slidesDidLoad(slides: IonSlides): void {
    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>

Ответ №3:

Это файл typescript:

 export class HomePage {
    slider: any;
    slideOptions = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: true
  };
  
  constructor() {}
  slideChanged()
  {
     this.slider.stopAutoplay(); //this code for slide after page change
     }
  }

Это HTML-файл:

 <ion-slides  #slider loop="true" pager="true" [options]="slideOpts" (ionSlideTouchEnd)="slideChanged()" >
  <ion-slide>
    <img src="https://png.pngtree.com/thumb_back/fh260/back_pic/00/02/44/5056179b42b174f.jpg" />
  </ion-slide>
  <ion-slide>
    <img src="https://www.neowebtec.com/images/banner-imgg.jpg" />
  </ion-slide>
  <ion-slide>
    <img src="https://i.pinimg.com/originals/0b/a3/d6/0ba3d60362c7e6d256cfc1f37156bad9.jpg" />
  </ion-slide>
</ion-slides>

Ответ №4:

Я думаю, вы столкнулись с гоночным состоянием. Возможно, элемент был отрисован до того, как данные (topStories) будут готовы. В этом случае нет перехода к «автозапуску».

Попробуйте добавить *ngIf к элементу, чтобы отобразить элемент, когда данные будут готовы. Например:

 this.data_loaded = false;
...

this.apiGetData().then((data) => {
    ...
    this.data_loaded = true;
});


######################################

<ion-slides *ngIf="data_loaded">
...
</ion-slides>

Ответ №5:

 <ion-slides pager #Slider class="slides (ionSlidesDidLoad)="afterslidesLoad(Slider)">
   <ion-slide>
     <img src="image1" />
   </ion-slide>
   <ion-slide>
     <img src="image2" />
   </ion-slide>
</ion-slides>

afterslidesLoad(slides) {
  slides.startAutoplay();
}

Приведенный выше код — мой рабочий код. Вы должны реализовать метод startAutoPlay.

Ответ №6:

Используйте свойство ввода [autoplay]="3000" для передачи миллисекунд:

 <ion-slides [pager]="true"  [autoplay]="3000">
    <ion-slide>
      Slide 1
    </ion-slide>
    <ion-slide>
      Slide 2
    </ion-slide>
    <ion-slide>
      Slide 3
    </ion-slide>
</ion-slides>

Ответ №7:

пожалуйста, попробуйте это решение:

   <ion-slides *ngIf="topStories.length!=0" 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>

Ответ №8:

Вот как использовать настройку автозапуска в Ionic 5

 <ion-slides [options]="{ slidesPerView:2, autoplay: {delay: 1500} }">