I'm trying to make a carousel with angular and swiper, but the navigation buttons don't work, what am I doing wrong? The buttons appear and the carousel works correctly only if I drag it with the mouse, but the buttons don't work for me, I hope you can help me
Another thing, in the app.module something should be added?
these are my codes:
COMPONEN.TS
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ApiService } from '../service/api.service';
import Swiper from 'swiper';
@Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit, AfterViewInit {
//**//
initSwiper() {
const mySwiper = new Swiper('.swiper-container', {
// Configuración de Swiper (puedes personalizarla según tus necesidades)
slidesPerView: 'auto',
spaceBetween: 16,
loop: true,
pagination: {
el: '.swiper-pagination', // Elemento de paginación
clickable: true, // Permite hacer clic en la paginación para cambiar de diapositiva
},
navigation: {
nextEl: '.swiper-button-next', // Elemento del botón de siguiente
prevEl: '.swiper-button-prev', // Elemento del botón de anterior
},
});
}
}
HTML
This is my html, im not sure if in this way is correct
<div class="swiper-container">
<div class="swiper-wrapper">
<ng-container *ngFor="let item of data.results; let i = index">
<div *ngIf="i < 4" class="swiper-slide">
<img src="https://image.tmdb.org/t/p/w500/{{ item.backdrop_path }}" alt="" class="rounded-lg">
</div>
</ng-container>
</div>
<!-- Botones de navegación -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Paginación -->
<div class="swiper-pagination"></div>
</div>
I tried to power more property inside my init swiper but it didn't work for me