El componente Slides

No se si sea tal vez por la versión de ionic, pero actualmente

<ion-content padding>

el atributo padding ya no funciona, se tiene que agregar una clase css

<ion-content class="ion-padding">

En vez de colocar display block, a mi entender es mejor colocar la propiedad flex-direction:column, ya que si se inspecciona los estilos que tienen la clase -swiper-slide vemos que es un display flex !

IONIC 6

ion-slides y ion-slide estan siendo removidos de Ionic, ver mas información en el siguiente enlace.
Los Slides ahora usaran una nueva librería llamada Swiper.js, en el siguiente enlace explican como se debe usar he instalar.
Usando la nueva librería el slide de Platzi-music queda así:

<ion-content [fullscreen]="true">
  <swiper [keyboard]="true" [pagination]="true" [scrollbar]="true" [zoom]="true">
    <ng-template swiperSlide>
      <div>
        <ion-icon name="close"></ion-icon>
        <img src="../../assets/img/logo.png" alt="Platzi Music Logo">
        <h1>Slide 1</h1>
        <p>lorem ipsum dolor sit amet, consectetur adip</p>
        <ion-icon name="play"></ion-icon>
      </div>
    </ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
  </swiper>
</ion-content>

esta clase va por muy buen camino, todo super hasta ahora

Excelente clase profe… sigamos…

Pues asi me quedo la 4ta slide!

Con React, pueden agregar ^-^:

  const slideOpts = {
    initialSlide: 0,
    slidesPerView: 1,
    centeredSlides: true,
    speed: 400
  };

Y dentro del componente:

      <IonContent fullscreen>
        <IonSlides 
        pager={true} 
        options={slideOpts}
        >

¿Por qué la clase .swiper-slide funciona si en el archivo home.page.html no se está utilizando? 🤔

Excelente la forma de explicar. Muy buena forma de transmitir el conocimiento.

Muy buena explicación.

Estoy llevando este tipo de Slide pero quiero que sea autoPlay no ubico donde agregarlo, gracias.

Para las versiones superiores a Ionic 4, si van a usar la clase .swiper-slide procuren aplicar la clase directamente a los tag html <ion-slide> en mi caso solo puse que el estilo aplicara a todos los ion-slide directamente

ion-slide{
 display: block;
  margin-bottom: 64px;
  background-color: white;
}