Why is the "ion-slides" not working properly in my app?

Question

I’m developing an app using Ionic 4.

On one of the pages I started creating, I’m trying to use the "ion-slides component".

I inserted a basic component into an html page, just to test, like this:

<ion-slides>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

I have not made any changes to the typescript file on this page, as you can see below:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-novo-teste',
  templateUrl: './novo-teste.page.html',
  styleUrls: ['./novo-teste.page.scss'],
})
export class NovoTestePage implements OnInit {
  
  constructor() { }

  ngOnInit() {
  }

}

The problem is that the screen gets all black and the "ion-slide" occupies only the top part of the screen, as it appears in the image below:

I am using Google Chrome, and no error appeared in the browser console.

How do I fix it?

From now on, thank you!

Answer 1

I’ll give you an example to see if it helps my friend:

import { Component } from '@angular/core';

@Component({
  selector: 'slides-example',
  template: `
    <ion-slides pager="true" [options]="slideOpts">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>
  `
})
export class SlideExample {
  // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
  slideOpts = {
    initialSlide: 1,
    speed: 400
  };
  constructor() {}
}