Implementando slides

Con base en la documentación con el nuevo parh sería así:
@import ‘~swiper/css’;

Para los que están instalando swiper les recomiendo realizar la instalación de la versión 8 ya que actualmente las versiones superiores no cuentan con la parte modular.

npm install swiper@8.4

Al día de hoy creo que a cambiado un poco.
No me dio error en la instalación de la siguiente manera:

1. Debes instalar el Swiper:

npm i swiper

1. Importar el modulo en app.module:

import { SwiperModule } from 'swiper/angular'; 

Y también ponerlo en el NGModule:

imports: [ SwiperModule ]

1. Importar los siguientes 3 estilos a los globales styles.scss:

@import 'swiper/scss';
@import 'swiper/scss/navigation';
@import 'swiper/scss/pagination';

Espero te ayude, por ahora no me dio error, no sé si mas adelante lo haga jaja.
No olvides mirar la documentación oficial:
https://swiperjs.com/angular

Nunca pares de aprender ❤️

Actualizacion para Swiper a la version reciente

Primero instalamos swiper:

npm install swiper

Les va a instalar la mas nueva. ^9.3.2
Despues agregamos esto a app.module.ts:

import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { register } from 'swiper/element/bundle';
register();
schemas: [CUSTOM_ELEMENTS_SCHEMA]

asi:

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:

<swiper-container> y <swiper-slide> 

Son la nueva forma de escribirlas.

Les dejo la documentacion: https://swiperjs.com/element

Espero les sirva

Es necesario actualizar este video, swiper cambio muchisimo en su ultima versió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

npm i swiper@8.4.7

y despues van a ir a la documentacion: https://v8.swiperjs.com/angular

y en su sccss van a pegar esto:

/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url(./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;
    }
  }
}

Considero que una buena práctica sería separar el detall del contenido en un nuevo componente product-detail

<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
<swiper
    [slidesPerView]="1"
>
    <ng-template swiperSlide *ngFor="let img of product.images">
        <img [src]="img" [alt]="product.title">
    </ng-template>
</swiper>
<p>{{ product.description }}</p>

Para que te funcione correctamente el Swipper
debes hacer lo siguiente:

En la consola ejecutar lo siguiente para instalar Swipper

npm i swiper

De ahi en el app.module.ts lo deben poner asi.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { SwiperModule } from 'swiper/angular';
import SwiperCore, { Pagination } from "swiper";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ImgComponent } from './components/img/img.component';
import { ProductComponent } from './components/product/product.component';
import { ProductsComponent } from './components/products/products.component';
import { NavComponent } from './components/nav/nav.component';
import { ReversePipe } from './pipes/reverse.pipe';
import { TimeAgoPipe } from './pipes/time-ago.pipe';
import { HighlightDirective } from './directives/highlight.directive';

SwiperCore.use([Pagination]);

@NgModule({
  declarations: [
    AppComponent,
    ImgComponent,
    ProductComponent,
    ProductsComponent,
    NavComponent,
    ReversePipe,
    TimeAgoPipe,
    HighlightDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    SwiperModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

y en los estilos globales agregar esto

@import '~swiper/scss';

y listo ya estaria y funcionaria correctamente

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.

1. Instalar el Swiper:

npm i swiper

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

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

En el decorador sería de la siguiente manera:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

1. En el archivo products.component.ts agregué los siguientes imports

import { AfterViewInit, Component, ElementRef, ViewChild, OnInit } from '@angular/core';
.
.
.
import { register } from 'swiper/element/bundle';
import { Swiper } from 'swiper/types';

1. Agregue en implementes AfterViewInit en la clase y agregue el decorador ViewChild.

export class ProductsComponent implements OnInit, AfterViewInit {
.
.
.
@ViewChild('swiper')
  swiperRef: ElementRef | undefined;
  swiper?: Swiper;

  ngAfterViewInit(): void {
    register();
    this.swiper = this.swiperRef?.nativeElement.swiper;
  }

Nota: El ngAfterViewInit lo agregué para poder hacer el register() ya que en la documentación dice que se tiene que llamar antes de utilizarlo

1. En el archivo products.component.html continué con el ejemplo del curso, quedando así:

<div class="product-detail" [class.active]="showProductDetail">
  <div *ngIf="productChosen">
    <button (click)="toggleProductDetail()">Colse</button>
    <h1>{{ productChosen.title }}</h1>

    <swiper-container #swiper initial-slide="0" pagination="true" slides-per-view="1">
      <swiper-slide *ngFor="let img of productChosen.images">
        <img [src]="img" width="100%" alt="{{ productChosen.title }}" />
      </swiper-slide>
    </swiper-container>

    <p>{{ productChosen.description }}</p>
  </div>
</div>

Saludos.

Le agregué algunos estilos a la App para qué quedará mejor

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 panel
    if(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 detalles
    if(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();
      }

    });
  }

Actualmente Swiper está en su versión 9 pero solamente hasta la 8.4.7 está soportada para Angular
entonces hay que hacer npm i [email protected]

Y con eso ya se pueden guiar por la documentación para la V8:
https://v8.swiperjs.com/angular

Codigo de ejemplo de Swiper:

<swiper
[slidesPerView]=“3”
[spaceBetween]=“50”
(swiper)=“onSwiper($event)”
(slideChange)=“onSlideChange()”
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
</swiper>

swiper me jodiste

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 😦

Se me presentó un problema/error ( Error: Module build failed) al momento de importar los estilos ya que estoy usando css.

Buscando pude resolverlo importándolos así:

@import '~swiper/swiper.min.css';
@import '~swiper/modules/navigation/navigation.min.css';
@import '~swiper/modules/pagination/pagination.min.css';

bootstrap tambien maneja slices bueno un poco mas facil de implementar

Esto lo voy a usar para mi proyecto del trabajo 8)

Swiper

Por si tienen problemas con el swiper:

1. En el package.json colocar “swiper”: “6.8.0”, y hacer npm i

2. Importar en el app.module> import { SwiperModule } from ‘swiper/angular’;

3. en el Styles.scss colocar > @import ‘~swiper/swiper.scss’;

Y no se preocupen si ven que la misma url de la imagen no muestra la misma, cambia por segundo.

La versión actual ya no tiene soporte para Angular, por lo que se debe instalar con:

npm i [email protected]

La documentación se puede obtener con el enlace:
(https://v8.swiperjs.com/angular)

#Arreglando Swipper
Si como yo estás haciendo este curso en 2023, el swiper no te funcionará ya que con

npm i swiper

se te instalará la version 10 cuando solo dan soporte para angular hasta la 8:

npm install swiper@8.4.6

Esta es su documentación correspondiente:
https://v8.swiperjs.com/angular

Implementando Slider, pero con Boostrap 5.0

# Primero Instalamos la Librería en el Directorio del Proyecto
ng add @ng-bootstrap/ng-bootstrap

# Importamos la Librería
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Finalemte la implementamos al proyecto

<div *ngIf="productChosen" class="product-detail" [class.active]="showProductDetail">
  <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" *ngFor="let img of productChosen.images; index as i" class="carousel-item" [class.active]="i === indexImgActivate"
      data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    </div>
    <div class="carousel-inner">
      <div *ngFor="let img of productChosen.images; index as i" class="carousel-item" [class.active]="i === indexImgActivate" >
        <img [src]="img" class="d-block w-100" alt="...">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev" (click)="onPrevImage()">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next" (click)="onNextImage()">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
  <h1>{{ productChosen.title }}</h1>
  <p>{{ productChosen.description }}</p>
  <button (click)="onToogleProductDetail()">Close</button>
</div>

Hay que crear, una variable y dos funciones adicionales

indexImgActivate = 0;

  onPrevImage() {
    if (this.indexImgActivate > 0) {
      this.indexImgActivate -= 1;
    } else {
      this.indexImgActivate = this.productChosen.images.length-1;
    }
  }

  onNextImage() {
    if (this.indexImgActivate<this.productChosen.images.length-1) {
      this.indexImgActivate += 1;
    } else {
      this.indexImgActivate = 0;
    }
  }

Swiper esta totalmente cambiado tratando de ser pago imposible de implementar actualmente, mas en un curso

Para seguir el vídeo, toca instalar swiperv8. https://v8.swiperjs.com/angular

npm i swiper@8

Para importar los estilos: @import '~swiper/scss';

Me costo un poco. Y ojala aqui haya alguien que sepa mucho Angula para orientarme mas.

Lo que hice fue separar el componente de product-detail en su correspondiente componente, mediante la comunicacion de componentes le pase el “productChoosen” para que pudiera cargar la data.
Mi dolor de cabeza comenzo fue cuando comence a manejar lo que yo llamaria el estado de “showProductDetail” y dure casi 4 horas leyendo e investigando a lo que plantee la siguiente solucion.

En el store service cree un Observable que me permitiera escuchar el estado de manera constante:

StorageService

//storage.service.ts
 private showProductDetail = false;
  private showProduct = new BehaviorSubject<boolean>(this.showProductDetail);
  showProduct$ = this.showProduct.asObservable();


  toogleProduct(){
    this.showProductDetail = !this.showProductDetail;
    this.showProduct.next(this.showProductDetail)
  }

Luego en el componente de product detail lo que hice fue almacenar el estado y modificarlo manejando el servicio.

Componente product-datail

//product-detail.component.ts
 constructor(private storeService: StoreService) { }
  showProductDetail = false
  showProduct$ = this.storeService.showProduct$

  ngOnInit(){
    this.storeService.showProduct$.subscribe(state => {
      this.showProductDetail = state
    })
  }

  toggleProductDetail() {
    this.storeService.toogleProduct()
  }

Me quedo un sin sabor de boca por todo el tiempo que me demore en esto, y segundo porque siento que debe existir una manera mas sencilla y mucho mejor de hacer exactamente lo mismo.

Con un poco de desanimo les comparto mi aporte.

Me descargué los archivos de la clase, y me sigue sin funcinoar el swiper

Espero que alguien le sirva de ayuda
Para que me funcione swiper lo importe en el archivo de estilos del componente y del style general.
Además, importe las siguientes líneas en el archivo products.component.scss

@import ‘swiper/css’;
@import ‘swiper/css/bundle’;
@import ‘swiper/css/a11y’;
@import ‘swiper/css/navigation’;
@import ‘swiper/css/pagination’;

y en el archivo styles.scss importe lo siguiente

@import ‘swiper/css’;

@import ‘swiper/css/bundle’;

Para que les funcione el paginador de slides, deben agregar las siguientes lineas en el app.module.ts.

import { SwiperModule } from 'swiper/angular';
import SwiperCore, { Pagination } from "swiper";
SwiperCore.use([Pagination]);

Asi implemente el swiper y me funciona.

npm i swiper (instalar version mas reciente)
En el archivo styles.scss
@import ‘swiper/css/bundle’;
En el .ts a utilizar swiper
import Swiper from ‘swiper’;

Les comparto dos alternativas para Swiper:

Owl Carousel.
Slick Carousel.

No están diseñadas específicamente para Angular, pero se puede integrar utilizando directivas personalizadas.

npm install [email protected]
Por si no les servia la nueva version de swiper

Ya parece que no funciona swiper para angular (pequeño detalle)

Utilicen este comando y pueden seguir el video, npm i [email protected] --save

Si están usando Angular 15 y Swiper 8:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { SwiperModule } from 'swiper/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ImgComponent } from './components/img/img.component';
import { ProductComponent } from './components/product/product.component';
import { ProductsComponent } from './components/products/products.component';
import { NavComponent } from './components/nav/nav.component';
import { ReversePipe } from './pipes/reverse.pipe';
import { TimeAgoPipe } from './pipes/time-ago.pipe';
import { HighlightDirective } from './directives/highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    ImgComponent,
    ProductComponent,
    ProductsComponent,
    NavComponent,
    ReversePipe,
    TimeAgoPipe,
    HighlightDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    SwiperModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

y para los estilos: @import 'swiper/scss';

Para usar los modules de navegacion de swipper en Angular deben importar lo siguiente:

import SwiperCore, { Navigation, Pagination, Scrollbar } from 'swiper';

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar])

Si alguien tuvo problemas al instalar o aparece un error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve

yo utilice estos comandos

1. npm install --legacy-peer-deps
2. npm install
3. npm audit fix
4. npm i swiper

Si utilizan css, importar en el styles.css lo siguiente
@import ‘~swiper/swiper.min.css’;
@import ‘~swiper/modules/navigation/navigation.min.css’;
@import ‘~swiper/modules/pagination/pagination.min.css’;

Utilizando nuestro componente de imagenes

<h1>{{productChosen.title}}</h1>
    <swiper [slidesPerView]="1">
    <ng-template swiperSlide *ngFor="let imag of productChosen.images">
      <app-img [img]="imag"></app-img>
    </ng-template>
    </swiper>
    <p>{{productChosen.description}}</p>