Why is my Swiper component not working in Angular17? The images won't load, just the first,...

product.carousel.component.html

<swiper-container loop="true" navigation="true">
@for (image of images; track $index) {
<swiper-slide>
<img class="item" src="{{ image.imageUrl }}" alt=""
/></swiper-slide>
}
</swiper-container>


product.carousel.component.ts


@Component({
selector: 'app-product-carousel',
standalone: true,
imports: [CommonModule],
providers: [],
templateUrl: './product-carousel.component.html',
styleUrl: './product-carousel.component.scss',
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})


main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { register } from 'swiper/element/bundle';

register();

bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);


I'm trying to make a carousel with images of product, but when I try to swipe, the image flicks and don't change, just the index

Continue reading...