Integración de Swiper en Angular para Galería de Productos
Resumen
Una necesidad crucial cuando se trabaja con Angular es la importación de componentes de terceros para un rápido desarrollo y utilización de los mismos.
Cómo importar componentes de terceros
Anímate a crear un carrusel de imágenes utilizando librerías como SwiperJS. Luego, instala la dependencia con el comando npm i swiper e impórtala en el módulo principal de tu aplicación para que esté lista para utilizarse.
Es importante que sepas importar y utilizar este tipo de componentes ya listos para ser utilizados y agilizar así el desarrollo de cualquier aplicación.
API de Prueba
Existen muchas API gratuitas que puedes utilizar para practicar y construir aplicaciones, te comparto las más populares para que las investigues
Anímate a explorar estas API y diviértete desarrollando aplicaciones y practicando todo lo que ya sabes sobre Angular hasta aquí. Más adelante en el curso verás cómo potenciar el consumo de API con Angular y sacarle mayor provecho a este framework.
Y ya con eso estaria funcionando.
No es necesario que se agreguen estilos por el momento como se ve en el video.
Para renderizarlo en el componente .html se debe escribir asi:
Las clases que agregue no tienen nada que ver. Son simplemente estilos propios. Lo importante son las etiquetas:
Hoy he descubierto que el amor de verdad existe, gracias
Es necesario actualizar este video, swiper cambio muchisimo en su ultima versión
Tuve que instalar la versión 8.4+ y con instrucciones de la documentación correspondiente a la versión, pero aún así las imágenes que me aparecen todas hacía abajo al apretar el botón.
hola, miren para que puedan los nuevos que vana entrar a este curso, ya que el curso tiene bastante tiempo y al seguir los pasos del profe a algunos les va a dar un error hagan esto:
en su terminal van a escribir para instalar
/* You can add global styles to this file, and also import other style files */@importurl('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');@importurl(./styles/reset.scss);@import'swiper/scss';@import'swiper/scss/navigation';@import'swiper/scss/pagination';*{ font-family:'Quicksand', sans-serif;}.products--grid { app-img { img { border-radius: 10px; max-height: 200px;}}}
Gracias, esto me funcionó
Considero que una buena práctica sería separar el detall del contenido en un nuevo componente product-detail
Ilustrame como acomodarías los métodos en el nuevo componente buen hombre :D. No he podido separar toda la parte del detalle del producto en un solo componente
Para que te funcione correctamente el Swipper
debes hacer lo siguiente:
En la consola ejecutar lo siguiente para instalar Swipper
En este capítulo me dio problemas al querer implementar Swiper Element revisando la documentación, hicieron una actualización y ahora se implementa de otra forma. Les comparto como lo implemente por si alguien más se atora en este paso.
Instalar el Swiper:
npm i swiper
En el archivo app.module.ts agregue CUSTOM_ELEMENTS_SCHEMA al decorador ++@NgModule++, esto porque no reconoce ++swiper-container++ y ++swiper-slide++, también lo agregue en el import
Le puse la siguiente lógica al código de onShowDetails
onShowDetails(id:string){//en caso de que den dos veces al botón solo ocultara los detalles(para no ir a darle al botón de cerrar)if(this.productChosen.id!=''&&this.productChosen.id== id &&this.showProductDetail==true){this.showProductDetail=false;return;}//en caso de que seleccionen el mismo producto ya no hay necesidad de hacer la petición de nuevo y solo vuelve a mostrar el panelif(this.productChosen.id!=''&&this.productChosen.id== id &&this.showProductDetail==false){this.showProductDetail=true;return;}//en caso que le den al botón de ver detalles mientras ya están abiertos los de un producto diferente cierra el panel de detallesif(this.productChosen.id!=''&&this.productChosen.id!= id &&this.showProductDetail==true){this.showProductDetail=false;}this.productService.getProduct(id).subscribe(data=>{this.productChosen= data;if(!this.showProductDetail){this.toggleProductDetail();}});}
Eres grande crack!
creo que deberian cambiar el curso nada mas por implementar swiper. Esta herramienta cambio mucho y los estudiantes estan teniendo muchos porblemas para seguir el hilo por los cambios en la implementacion :(
Acabo de subir una sugerencia con Boostrap, si puedes aplicala, funciona sin problemas .. esta entre los aportes .
como le hago cuando dice que la version 9 Swiper fue removido de Angular?
x2
A alguien más le sale este error por casualidad?
ModuleBuildError:Module build failed(from./node_modules/sass-loader/dist/cjs.js):SassError:Can't find stylesheet to import.
Si es así, lo han podido solucionar¿?
Hola
Puede ser que el error se deba a una diferencia entre las versiones 7 y 8 de saas-loader ¿qué versión estás utilizando actualmente?
me paso lo mismo.
... :(
Sin solucion aun
Hola compañeros, si alguien llega a tener problemas instalando swiper, lamentablemente swiper eliminó el modulo para Angular en sus versiones mas recientes, puedes instalar la versión 8.4.6, que es la ultima que tiene el módulo, para esto:
Vayan a package.json en la carpeta razi de sus proyectos e identifique "swiper": "^10.X.X", cambie la versión y dejelo así: ""swiper": "^8.4.6",".
Luego ejecute npm i para que node refresque los paquetes y librerías.
Listo! siga los pasos de esta clase y debería funcionar
Gracias 💚
swiper me jodiste
Se me presentó un problema/error ( Error: Module build failed) al momento de importar los estilos ya que estoy usando css.
