Carousel strange behavior at first launch

<template>

  <!--ViewWrapper-->
  <mdb-carousel :interval="7000" indicators :items="3">
    <template #1>
      <mdb-view class="view1">
        <mdb-mask
          class="d-flex justify-content-center align-items-center"
          overlay="black-strong"
        >
          <mdb-container>
 <p> some content</p>
</mdb-container>
        </mdb-mask>
      </mdb-view>
    </template>
    <template #2>
      <mdb-view class="view2">
        <mdb-mask
          class="d-flex justify-content-center align-items-center"
          overlay="black-strong"
        >
          <mdb-container>
<p> some content</p>
</mdb-container>
        </mdb-mask>
      </mdb-view>
    </template>
    <template #3>
      <mdb-view class="view3">
        <mdb-mask
          class="d-flex justify-content-center align-items-center"
          overlay="black-strong"
        >
          <mdb-container>
<p> some content</p>
</mdb-container>
        </mdb-mask>
      </mdb-view>
    </template>
  </mdb-carousel>
  <!--/ViewWrapper-->
</header>

Magdalena Dembna staff premium commented 5 months ago

Thank you for reporting this issue - I will add a task to inspect this behaviour. Best regards, Magdalena

---

GuillaumeDgr pro premium commented 5 months ago

Thanks a lot, how can I fix this issue ? thks

---

Magdalena Dembna staff premium commented 5 months ago

The only fix on your side I can think of would be some kind of loader covering images until the component fully loads:

https://mdbootstrap.com/snippets/vue/m-dembna/2640346#html-tab-view

Best regards,

Magdalena

---