Carousel with cross-fade using *ngFor


Topic: Carousel with cross-fade using *ngFor

luqeckr asked 3 years ago

Hi, if i use the carousel using crossfade effect, then applied the *ngFor then i have different effect from the docs

<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'" [isControls]="false" >
            <mdb-carousel-item *ngFor="let c of headers">
                <img class="d-block w-100" [src]="c.url" [alt]="c.caption">
            </mdb-carousel-item>
</mdb-carousel>

if i inspect with chrome, i got this:

<div class="carousel-inner"><!--bindings={
      "ng-reflect-ng-for-of": "[object Object],[object Object"
    }-->
    <mdb-carousel-item _ngcontent-c2="" class="carousel-item ng-star-inserted">
        <img _ngcontent-c2="" class="d-block w-100" src="http://aaa.local/api/wp-content/uploads/2019/01/header1-1.jpeg" alt="">
    </mdb-carousel-item>
    <mdb-carousel-item _ngcontent-c2="" class="carousel-item ng-star-inserted">
        <img _ngcontent-c2="" class="d-block w-100" src="http://aaa.local/api/wp-content/uploads/2019/01/header4.jpeg" alt="">
    </mdb-carousel-item>
</div>

but with the sample on the documentation: the mdb-carousel-item is replaced with div class="carousel-item" i think thats the reason i have different fade effect.. it's like flashy effect

how to solve this.? thx


luqeckr answered 3 years ago

it's seem this problem fixed in 7.4.0, previously i was in 7.2.x. But now, after upgrade i have to add d-block w-100 to mdb-carousel-item too.. to prevent image aspect ratio changed on different size.Below is my new code,

<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'" [isControls]="false" >
        <ng-container *ngFor="let c of headers">
            <mdb-carousel-item class="d-block w-100">
                <img class="d-block w-100" [src]="c.url" [alt]="c.caption">
            </mdb-carousel-item>
        </ng-container>
    </mdb-carousel>

Arkadiusz Idzikowski staff answered 3 years ago

Hello,

Thank you for letting us know about this problem, we will take a closer look at it. Unfortunately, this may require some changes in the component code, so I can't provide a workaround for now.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: laptop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No