carousel automatic slide animation bug


Topic: carousel automatic slide animation bug

Ju Graisse free asked 5 days ago

Hello!

This is a bug I have even with the code from the doc examples: If a carousel slides automatically when reaching the interval, the leaving carousel item slides out correctly, but the animation is broken with the entering item. When sliding using controls and indicators, the animation works fine.

Expected behavior

Carousel items should have an animation when sliding automatically just as when using controls/indicators

Actual behavior

Broken animation when sliding automatically on interval

Have a good day :-)


Michał Duszak staff commented 4 days ago

Hello, unfortunately I couldn't reproduce this error. Could you please provide a code example where this issue occurs?


Ju Graisse free commented 4 days ago

Well here is a code example, but it's yours actually:

<mdb-carousel [controls]="true">
  <mdb-carousel-item>
    <img
      src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp"
      class="d-block w-100"
      alt="..."
    />
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img
      src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp"
      class="d-block w-100"
      alt="..."
    />
  </mdb-carousel-item>
  <mdb-carousel-item>
    <img
      src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp"
      class="d-block w-100"
      alt="..."
    />
  </mdb-carousel-item>
</mdb-carousel>

In my project, I also use Angular Material. Could there be a conflict? I went back to the old angular-bootstrap-md@11.0.0 and everything works fine.


Michał Duszak staff commented 1 day ago

Could you please check if you could reproduce this issue in a new installed mdb-angular app? I have tried the above code after installing a new app according to this guide: https://mdbootstrap.com/docs/angular/pro/installation/#section-advanced-installation


Michał Duszak staff commented 1 day ago

Have you set changeDetection: ChangeDetectionStrategy.OnPush

in your @Component declaration?


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 2.3.0
  • Device: lenovo thinkpad
  • Browser: chrome, firefow
  • OS: xubuntu
  • Provided sample code: No
  • Provided link: No