Блог

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

ползунок автозапуска для ionic 4

#angular #ionic-framework

#angular #ionic-фреймворк

Вопрос:

Привет, я пытался добиться автоматического слайда для Ionic 4, но, похоже, это не работает…ниже приведен код

 page.ts
=========
 @ViewChild(IonSlides) slider: IonSlides;
  options: {
    autoplay: true
  }  
 HTML
========
     <ion-slides #IonSlides pager="true" [options]="options" (ionSlidesDidLoad)="stopSlideAutoplay()">
          <ion-slide>
             <ion-img src="assets/whitebg.svg"></ion-img>
            </ion-slide>
      
          <ion-slide>
              <ion-img src="assets/whitebg.svg"></ion-img>
          </ion-slide>
          </ion-slides>

Ответ №1:

файл page.ts:

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

export class page implements OnInit {
    @ViewChild('mySlider') slider: IonSlides;
    sliderOpts = {
        autoplay: true,
        speed: 1000,
        zoom: {
          maxRatio: 5
        }
      };
    }

page.html файл:

  <ion-slides #mySlider pager="true" 
         [options]="sliderOpts" >
        <ion-slide></ion-slide>
   </ion-slides>

Ответ №2:

Попробуйте этот код, установив autoplay: true ,

 <ion-slides [options]="sliderOpts" #slider>
     <ion-slide>
             <ion-img src="assets/whitebg.svg"></ion-img>
            </ion-slide>

          <ion-slide>
              <ion-img src="assets/whitebg.svg"></ion-img>
          </ion-slide>
</ion-slides>

и в TS

 @ViewChild('slider', { read: ElementRef })slider: ElementRef;
  img: any;

  sliderOpts = {
    autoplay: true,
    zoom: {
      maxRatio: 5
    }
  };

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

1. хотя это очень странно! какая версия ionic

2. я заставил его работать, добавив это sliderOpts = {автозапуск: true, масштабирование: {Максимальное значение: 5 }};

Ответ №3:

в вашем файле .ts

 import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";

 @ViewChild("slider", { read: ElementRef }) slider: ElementRef;


  sliderOpts = {
    autoplay: true,
    zoom: {
      maxRatio: 5
    }
  };

в HTML-файле

 <ion-slides
    (ionSlideDidChange)="slideChanged()"
    #slider
    [options]="sliderOpts"
  >
    <ion-slide>
      <img class="images" src="assets/intro/welcomes.png" />
      <p class="pt-page-rotatePullLeft pt-page-delay500 heading">
        {{ "onboard.welcome" | translate }}
      </p>
      <p class="subtitles">{{ "onboard.welcomeSub" | translate }}</p>
    </ion-slide>
    <ion-slide>
      <img class="images" src="assets/intro/payments.png" />
      <p class="heading">{{ "onboard.pay" | translate }}</p>
      <p class="subtitles">{{ "onboard.paySub" | translate }} <br /></p>
    </ion-slide>
    <ion-slide>
      <img class="images" src="assets/intro/send.png" />
      <p class="heading">{{ "onboard.sendamp;received" | translate }}</p>
      <p class="subtitles">
        {{ "onboard.sendamp;receivedSub" | translate }} <br />
        {{ "onboard.sendamp;receivedSub2" | translate }}
      </p>
    </ion-slide>

    <ion-slide>
      <img class="images" src="assets/intro/wallets.png" />
      <p class="heading">{{ "onboard.wallet" | translate }}</p>
      <p class="subtitles">{{ "onboard.walletSub" | translate }}</p>
    </ion-slide>
  </ion-slides>