I had trouble using multiple instances on the same page because all the sliders are dynamic. After much effort, I have solved this problem. I add the solution in the answer. If this helps you, please mark it as the answer. Thanks
Answer of my problem:
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 }
});
}