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
