Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: ionic 4 ion-slide set initialSlide not work immediately

See original GitHub issue

Bug Report

Ionic version:

[x] 4.10.0

Current behavior: When I want to set initialSlide, but it’s still shows default value first, then change to value that I set

Expected behavior: It should not show first image

Steps to reproduce: Start project and then refresh home page

Related code: Home.page.ts file

slider = [
    'assets/images/download copy.jpg',
    'assets/images/download-2 copy.jpg',
    'assets/images/download-1 copy.jpg',
    'assets/images/download copy.png',
    'assets/images/download-1.jpg',
    'assets/images/download-3 copy.jpg',
    'assets/images/download-2.jpg',
    'assets/images/download-4.jpg',
    'assets/images/download-3.jpg',
    'assets/images/download-5 copy.jpg',
    'assets/images/download-6 copy.jpg',
    'assets/images/download-8 copy.jpg',
    'assets/images/download-4 copy.jpg',
    'assets/images/download-7 copy.jpg',
  ]

  slideOpts = {
		initialSlide: 10,
		speed: 400
  }

home.page.html file

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-slides pager="true" [options]="slideOpts" style="height: 95%">
        <ion-slide *ngFor="let img of slider;let i = index">
            {{i}}
            <img [src]="img" (error)="$event.target.src = 'assets/images/download.png'" />
        </ion-slide>
    </ion-slides>
</ion-content>

Github repo: - https://github.com/tajinder-logiciel/slider-issue

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.7 (/Users/tajinder/.nvm/versions/node/v12.8.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (/Users/tajinder/Library/Android/sdk)
   NodeJS            : v12.8.0 (/Users/tajinder/.nvm/versions/node/v12.8.0/bin/node)
   npm               : 6.10.2
   OS                : macOS Mojave