Angular：同一页面上有多个 swiper slider 实例（已解决问题）

Question

我在同一页面上使用多个实例时遇到了麻烦，因为所有滑块都是动态的。 经过多方努力，我已经解决了这个问题。 我在答案中添加了解决方案。 如果这对您有帮助，请将其标记为答案。 谢谢

Answer 1

我的问题的答案：

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 }
                    });
                
        }