Заставить две карусели работать с одной и той же кнопкой «вперед» и «вперед» одновременно

Question

Я нашел много вопросов, похожих на мои, но все они связаны с jQuery, как говорится в заголовке, я потратил два дня, пытаясь сделать это в Angular, но не смог найти простой код со страницы документации Bootstrap с моими изменениями:

Я знаю, что не стоит вставлять jQuery в проекты Angular, как говорит мой профессор, так есть ли способ сделать это без jQuery?

Как вы заметили, я добавляю один и тот же класс в .carousel, потому что я знаю, что не могу использовать один и тот же идентификатор более одного раза.

Спасибо большое!

<div class="container">  

  <!-- data-ride="carousel" -->
  <!-- id="carouselExampleControls" -->
      <div  class="carousel slide carouselExampleControls" style="height: 300px" data-interval="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./../assets/1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./../assets/2.JPG" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./../assets/3.JPG" class="d-block w-100" alt="...">
          </div>
        </div>

        <a class="carousel-control-prev" data-target=".carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" data-target=".carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

  <!-- id="carouselExampleControls" -->
  <div class="carousel slide carouselExampleControls" style="height: 300px">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./../assets/1.jpg" class="d-block w-100" alt="..." >
        </div>
        <div class="carousel-item">
          <img src="./../assets/2.JPG" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./../assets/3.JPG" class="d-block w-100" alt="...">
        </div>
      </div>
      <!-- <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a> -->
    </div>
</div>

Answer 1

У меня на самом деле есть попытка найти самый простой подход, который в основном изменяет backgroundImage, а не использовать его просто и практично для этой цели, вот код:

  @ViewChild('local') local: ElementRef;

  imgTracker = 0;


  imgArr = [
    'url(./../../../assets/1.jpg)',
    'url(./../../../assets/2.JPG)',
    'url(./../../../assets/3.JPG)'
  ];

ngOnInit() {
    this.renderer2.setStyle(this.local.nativeElement, 'backgroundImage', this.imgArr[this.imgTracker]);
    }


nextImg() {

      this.imgArr.push(this.imgArr[this.imgTracker]);
      this.renderer2.setStyle(this.local.nativeElement, 'backgroundImage', this.imgArr[this.imgTracker]);
      if (this.imgTracker >= this.imgArr.length) {
        this.imgTracker = 0;
        this.imgArr.length = 0;
      }
      this.imgTracker++;
    }

HTML:

<div class="image" #local></div>