carousel automatic slide animation bug

Topic: carousel automatic slide animation bug

Ju Graisse free asked 2 years 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 2 years ago

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

Ju Graisse free commented 2 years 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.

Please insert min. 15 characters.

Michał Duszak staff commented 2 years 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 2 years ago

Have you set changeDetection: ChangeDetectionStrategy.OnPush

in your @Component declaration?

Ju Graisse free commented 2 years ago

Yes, I was using ChangeDetectionStrategy.OnPush, and yes the bug is gone when I remove it. But why? The carousel's behaviour should fit in an OnPush strategy. Thank you anyway for the support!

Michał Duszak staff commented 2 years ago

Component doesn't mark the view as changed properly, we will work on fixing this in the nearest future.

Add comment

Arkadiusz Idzikowski staff answered 2 years ago