-1

Estou desenvolvendo um aplicativo usando Ionic 4.

Em uma das páginas que comecei a criar, estou tentando usar o componente "ion-slides".

Inseri um componente básico em uma página html, só para testar, desse jeito:

<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>

Não fiz nenhuma alteração no arquivo typescript dessa página, como podem ver abaixo:

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() {
  }

}

O problema é que a tela fica toda preta e o "ion-slide" ocupa somente a parte de cima da tela, como aparece na imagem abaixo:

Print da tela onde ocorre o problema Estou usando o Google Chrome, e não apareceu nenhum erro no console do navegador.

Como resolvo isso?

Desde já, obrigado!

2
  • Provavelmente é algum Css em algum lugar que está provocando isso.
    – LeAndrade
    26/07/2019 às 12:02
  • No ionic 3 era necessário importar o componente do slide, provavelmente no ionic 4 também seja necessário(achei esse exemplo de uso, talvez lhe ajude) 29/07/2019 às 14:12

1 Resposta 1

1

Vou te passar um exemplo para ver se ajuda amigo:

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() {}
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .