Is there a way to make an angular mdb carousel for background images?

Question

Is there a way to make an angular mdb carousel for background images? I want the carousel to only change the background image and have the same content for each carousel-item but not having to put that content(html text) in each carousel-item, if that makes sense. I dont want to have to put the content in each carousel-item because I would then have 3 duplicates of the same html code in each carousel.

I want it to look like the one on: https://mdbootstrap.com/snippets/jquery/mdbootstrap/50462?action=fullscreen except I want to have the only one instance of the content(html text) and just the background image carousel item to change.

<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
  <mdb-carousel-item>
    <div class="view w-100">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
      <div class="mask rgba-black-light waves-light" mdbWavesEffect></div>
    </div>
    <div class="carousel-caption">
      <h3 class="h3-responsive">Same Content</h3>
    </div>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <div class="view w-100">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
      <div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
    </div>
    <div class="carousel-caption">
      <h3 class="h3-responsive">Same Content</h3>
    </div>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <div class="view w-100">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
      <div class="mask rgba-black-slight waves-light" mdbWavesEffect></div>
    </div>
    <div class="carousel-caption">
      <h3 class="h3-responsive">Same Content</h3>
    </div>
  </mdb-carousel-item>
</mdb-carousel>

Answer 1

Try my code:

<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
  <mdb-carousel-item>
    <div class="view w-100">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
      <div class="mask rgba-black-light waves-light" mdbWavesEffect></div>
    </div>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <div class="view w-100">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
      <div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
    </div>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <div class="view w-100">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
      <div class="mask rgba-black-slight waves-light" mdbWavesEffect></div>
    </div>
  </mdb-carousel-item>
  <div class="carousel-caption">
    <h3 class="h3-responsive">One content for three backgrounds</h3>
  </div>
</mdb-carousel>

I moved the carousel-caption directly to the mdb-carousel element and it seems to fulfil your wish.