Ionic alternativa a Swiper.js (Solución) <con solo css>

Si tienes problemas con migrar ion-slides y en tu proyecto no funciona el Swiper.js o simplemente no quieres usar CUSTOM_ELEMENTS_SCHEMA Tenemos la solución.

Los desarrolladores de Ionic anunciaron que quedó obsoleto ionic-slides, sin embargo, ellos recomiendan utilizar la librería swiper.js donde en su mismo sitio web también han descrito los pasos y las recomendaciones para una adecuada migración. Sin embargo, a veces sucede que peleamos la migracion a swiper porque no se logra migrar o implementar eficientemente en tu proyecto Ionic.

A continuación presentamos pasos para poder representar un simple slider que no requiere librerías ni javascript solamente un html y un css. Puedes aplicarlo tanto para un slider dinámico como para un slider estático es decir, para un slider que utilice imágenes netamente fijas establecidas o para un slider que muestre imágenes que pueden cambiar dependiendo de configuraciones de administración de la app en la base de datos (entre otros).

Para ello necesitaremos utilizar un código html y un código css que plantearemos a continuación:

Coloque este codigo en su HTML:

            <div class="containerv2v2v2 contenedor_externo_carousel"  >       
              <img src="https://picsum.photos/id/237/200/300" alt="">
              <img src="https://picsum.photos/seed/picsum/536/354" alt="">
              <img src="https://picsum.photos/200/300?random=1" alt="">
              <img src="https://picsum.photos/200/300?random=2" alt="">
            </div>

para que esta información se muestre como si fuese un slider tenemos que agregar al archivo css asociada está hecho html ejemplo: slider.page.css en caso que tú página sea slider.page.html. para eso abrimos el archivo slider.page.css y colocamos el siguiente código css:

// empieza el css del slider del home pure css PWApp video carousel
.contenedor_externo_carousel{


  /* Hover efecto */
ul li:hover{
  background:#34515e;
}

/* animations or animaciones */

@keyframes mouvement {
  0%{
    left:100%;
    opacity:1 ;
  }
   20%{
    left:0;
    opacity:1;
  }
  40%{
    left:-100%;
    opacity:1;
  }
  // 100%{
  //   left:-100%;
  //   opacity:0;
  // }
}


img:nth-child(2){
  animation-delay:4s;
}
img:nth-child(3){
  animation-delay:8s;
}
img:nth-child(4){
  animation-delay:12s;
}
img:nth-child(5){
  animation-delay:16s;
}

/* Basics styles */
* {
  margin:0;
  padding:0;
}


  /*Menu Styles */
ul {
  position:absolute;
}
ul li {
  float:left;
  list-style-type: none;
  height:100%;
  // padding:32px 9px;
  font-size:1.2rem;
  cursor:pointer;
  letter-spacing:2px;
}
/* Main Styles */
main {
  // height:calc(100vh - 80vh);
  display:flex;
  justify-content:center;
  align-items:center;
  background: #e8eaf6;
  position:relative;
}

  /* Images container styles */

.containerv2v2v2 {
  position:relative;
  overflow:hidden;
  // width:70vw;
  // height:15vh;
  display:flex;
  background:black;
  box-shadow: 0px 0px 49px 1px rgba(0,0,0,0.15);
}

  /* Images styles */

img {
  width:100%;
  height: 15vh;

  left:100%;
  opacity:1;
  position:absolute;
  filter:brightness(80%);
  animation:mouvement 20s infinite;
}
    
}
// Termina el css del slider del home pure css PWApp video carousel

Ahora, si compilamos nuestra aplicación con el comando ionic serve podremos notar que se muestran nuestros sliders con imágenes estáticas, pero qué sucede si queremos mostrar imágenes dinámicas (diferentes) en un slider que cambie de imágenes según el contenido deseado a mostrar. a continuación presentamos los pasos para poder lograr imágenes que cambien con la mejor configuración anterior

Supongamos que tenemos un slider de promociones el cual queremos que cambien de imágenes con respecto a la configuración un panel administrativo de la aplicación para ello entonces necesitamos usar el atributo *ngFor el cual nos permitirá repetir cantidades de imágenes según el tamaño de una matriz de una variable definida en el Typescript. a continuación coloque este código en su html y de inmediato para que no dé error coloque la variable que va a contener ngFor:

        <main>
          <div class="containerv2v2v2 contenedor_externo_carousel">
            <img *ngFor="let menu_promocion of menu_promociones" [src]="menu_promocion.promocion1_new_url_image"
              alt="Cada Promocion" class="image1">
          </div>
        </main>

En el código anterior se muestra el atributo *ngFor en el elemento y en el mismo elemento también se utiliza el atributo dinámico [src] o source, código fuente de la imagen con el valor de la matriz en el TS. de inmediato nos dirigimos al typescript asociado a esta página ejemplo, slider.page.ts en donde deberemos colocar este código que recomendamos que esté en el IonViewWillEnter() el cual es el conjunto de funciones que se cargan después de entrar a la app.

  ionViewWillEnter() {

    var menu_promociones = [
      {"name":"imagen 1","promocion1_new_url_image":"https://picsum.photos/id/237/200/300"},
      {"name":"imagen 2","promocion1_new_url_image":"https://picsum.photos/seed/picsum/536/354"},
      {"name":"imagen 3","promocion1_new_url_image":"https://picsum.photos/200/300?random=1"},

    ]
  }

De esta manera ya podemos tener un slider el cual muestra imágenes estáticas y dinámicas de nuestra aplicación.