Implementando slides

4/23
Recursos

Aportes 8

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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 ❤️

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

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>

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.

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]);

bootstrap tambien maneja slices bueno un poco mas facil de implementar

Swiper