Tuve problemas para usar varias instancias en la misma página porque todos los controles deslizantes son dinámicos. Después de mucho esfuerzo, he resuelto este problema. Agrego la solución en la respuesta. Si esto te ayuda, por favor márcalo como la respuesta. Gracias
Respuesta de mi problema:
HTML:
<div *ngFor="let item of testSliderNumber; let index = index;"> <div> <div class="swiper-container swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> </div> </div> <div class="carousel-control-button"> <button class="carousel-control-item search-carousel-prev"><i class="flaticon-left-arrow-1"></i></button> <button class="carousel-control-item search-carousel-next"><i class="flaticon-right-arrow-1"></i></button> </div> </div> </div>TS:
import SwiperCore from 'swiper'; testSliderNumber: any = [ { id: '1' }, { id: '2' }, { id: '3' } ]; const swiperSliderItems= document.querySelectorAll('.swiper-container'); const prevSlide = document.querySelectorAll('.search-carousel-prev'); const nextSlide = document.querySelectorAll('.search-carousel-next'); for ( let i = 0; i < myCustomSlider.length; i++ ) { swiperSliderItems[i].classList.add('swiper-container-' + i); prevSlide[i].classList.add('search-carousel-prev-' + i); nextSlide[i].classList.add('search-carousel-next-' + i); var slider = new SwiperCore('.swiper-container-' + i, { navigation: { prevEl: '.search-carousel-prev-'+i, nextEl: '.searchcarousel-next-'+i } }); }