title: Why Did Ionic 4 Ion-Slides Suddenly Stop Displaying Properly?
body: <p>I have an Ionic 4 project that already had ionic slides implemented. Everything working great until some recent update to Ionic (less than a month ago) and they suddenly stopped working. </p>
  
  <p>On the first load, they seem to be fine, but on any load after that:</p>
  
  <ul>
  <li>The pager doesn't work or show up</li>
  <li>The images don't size correctly</li>
  <li>Scrolling works but doesn't snap slides to the center like it should</li>
  </ul>
  
  <p>First load works:
  <a href="https://i.stack.imgur.com/eogK6.png" rel="noreferrer">image of ion-slides as intended</a></p>
  
  <p>Second load does not:
  <a href="https://i.stack.imgur.com/olfw1.jpg" rel="noreferrer">image of ion-slides broken</a></p>
  
  <p>There are no error messages or warnings, and all the code below was working fine as of 1 month ago, no changes were made since. It just broke randomly.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ion-slides #slides pager="true"&gt;
    &lt;ion-slide *ngFor="let option of options; let i = index"&gt;
      &lt;ion-card mode="md" [ngStyle]="{'background': borderColors[i]}"&gt;
        &lt;img style="object-fit: contain; border-radius: 20px; padding: 2px;" [src]="option.imageUrl"&gt;
      &lt;/ion-card&gt;
    &lt;/ion-slide&gt;
  &lt;/ion-slides&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>import { Component, Input, ViewChild } from "@angular/core";
  import { IonSlides } from "@ionic/angular";
  import { ContestOption } from "src/app/models/contest-model";
  
  @Component({
    selector: "app-results-swiper",
    templateUrl: "./results-swiper.component.html",
    styleUrls: ["./results-swiper.component.scss"]
  })
  export class ResultsSwiperComponent {
    @Input() options = [
      { id: "null", imageUrl: "null", votes: 0 },
      { id: "null", imageUrl: "null", votes: 0 }
    ] as Array&lt;ContestOption&gt;;
    @Input() borderColors = [];
  
    @ViewChild("slides", null) slides: IonSlides;
  
    constructor() {}
  }
  
  </code></pre>
  
  <p>I tried isolating the problem even further. This HTML still fails:</p>
  
  <pre><code>&lt;ion-slides #slides pager="true" [options]="slidesOpts"&gt;
    &lt;ion-slide&gt;
      Hello
    &lt;/ion-slide&gt;
    &lt;ion-slide&gt;
      Hello Again
    &lt;/ion-slide&gt;
  &lt;/ion-slides&gt;
  </code></pre>
  
  <p>Just to reiterate, everything about this component was working not too long ago. Then I started seeing Ionic CSS deprecation warnings in my project in a recent update. They look like this:</p>
  
  <pre><code>[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
  Replace:
  '&lt;div text-center&gt;'
  
  With:
  '&lt;div class="ion-text-center"&gt;'
  </code></pre>
  
  <p>Since that update, the ion-slides broke and just decided to stop working. Please help!</p>