Ionic Alternativa a Swiper.js: Cómo Implementar un Slider Solo con CSS
En el desarrollo de aplicaciones móviles con Ionic, una de las herramientas más utilizadas para crear sliders es Swiper.js. Sin embargo, muchos desarrolladores enfrentan dificultades al migrar desde Ion-Slides hacia Swiper.js, o simplemente prefieren evitar el uso de librerías externas. Es aquí donde surge la Ionic alternativa a Swiper.js, una solución que permite implementar un slider funcional utilizando solo HTML y CSS. Esta alternativa no solo simplifica el proceso, sino que también mejora el rendimiento de tu aplicación al eliminar dependencias externas. En este artículo, exploraremos cómo puedes crear un slider eficiente y personalizable sin la necesidad de JavaScript, lo que te permitirá optimizar tus proyectos Ionic de manera fácil y efectiva.
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).
Crear un Slider con Solo CSS
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 carouselCrear un Slider Dinámico con ngFor
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.
Conclusión
Implementar un slider en Ionic sin depender de Swiper.js puede ser una excelente alternativa cuando no se desea usar librerías externas. Con solo HTML y CSS, puedes lograr una solución eficiente y simple. Además, si necesitas que las imágenes sean dinámicas, Ionic te ofrece la flexibilidad de integrarlas con ngFor en TypeScript. Esta es, sin duda, una alternativa a Swiper.js (solución) que te permitirá optimizar tu proyecto sin complicaciones.
