有没有办法为背景图片制作 angular mdb 轮播？

Question

有没有办法为背景图片制作 angular mdb 轮播？我希望轮播仅更改背景图像，并且每个轮播项目都具有相同的内容，但如果有意义的话，不必在每个轮播项目中放置该内容（html 文本）。我不想将内容放在每个轮播项目中，因为这样我就会在每个轮播中复制 3 个相同的 html 代码。

我希望它看起来像 https://mdbootstrap.com/snippets/jquery/mdbootstrap/50462?action=fullscreen 上的那个，除了我希望只有一个内容实例（html 文本）和背景图像轮播项目进行更改。

<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

试试我的代码：

<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>

我把carousel-caption直接移到了mdb-carousel元素上，看来可以满足你的愿望了。

有没有办法为背景图片制作 angular mdb 轮播？

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

html

css

sass

angular

mdbootstrap