Topic: Carousel strange behavior at first launch

GuillaumeDgr premium asked 4 years ago


Expected behavior Showing first carousel template normally.

Actual behavior At first site launch, carousel is showing third item few ms before showing first item.

Resources (screenshots, code snippets etc.)

<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 commented 4 years ago

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


GuillaumeDgr premium commented 4 years ago

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


Magdalena Dembna staff commented 4 years 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: Mac book pro
  • Browser: Firefox developers
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No