Есть ли способ сделать angular МБ карусель для фоновых изображений? - PullRequest
Новая
       17

Есть ли способ сделать angular МБ карусель для фоновых изображений?

0 голосов
/ 29 апреля 2020

Есть ли способ сделать angular МДБ карусель для фоновых изображений? Я хочу, чтобы карусель изменяла только фоновое изображение и имела одинаковое содержимое для каждого элемента карусели, но при этом не нужно было помещать это содержимое (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>

1 Ответ

1 голос
/ 30 апреля 2020

Попробуйте мой код: 

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

Я переместил заголовок карусели непосредственно к элементу mdb-carousel и, похоже, он соответствует вашему wi sh.

...