0

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

Saúl
  • 1
  • I think you are using swipper v9, so the implementation will be different for Angular try do like this https://stackoverflow.com/questions/75326426/how-to-use-swiper-9-with-angular – Bùi Anh Khoa Aug 10 '23 at 05:01
  • I am using Swiper 10, is version 9 better? – Saúl Aug 10 '23 at 18:00

0 Answers0