Search code examples
cssangularsassangular-materialmdbootstrap

Not hidden slided items of array during animation in MDB Angular

During animations six of items come out from div as image below.

How to hide slided elements during animations.

Using carousel from mdb for angular

Internet's fail me or I can't find answers for my questions.

slided cars

HTML:

        <mdb-carousel class="carousel-multi-item multi-animation" [animation]="'slide'">
            <ng-template #thenBlock >
                <mdb-carousel-item *ngFor="let cards of slides; let i = index">
                    <li  class="search-car__display-link" *ngFor="let car of cards ; let i index" >
                        <a [routerLink]="['/car-detail', car.id]">
                            <car-card [car]="i"></car-card>
                        </a>
                    </li>
                </mdb-carousel-item>
            </ng-template>
        </mdb-carousel>

SCSS:

.search-car {
    &__display-results {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 20px;
    }
    &__display-link {
        text-decoration: none;
        list-style: none;
        

        & > a {
            text-decoration: none;
        }
    }
}
.carousel-item {
    overflow: hidden;
    z-index: -100;
    &.active, &.carousel-item-right, &.carousel-item-next {
      display: flex !important;
      flex-wrap: wrap;
      z-index: 2;
    }
  }
Solution

  • FIX!

    Edit some HTML structure, deleting ng-templates with ng-container not added in issue. It's work on this code.

    <mdb-carousel @displayFilteredCars [isControls]="true" class="carousel-multi-item multi-animation" [animation]="'slide'">
                <mdb-slide *ngFor="let cards of slides; let i = index">
                    <li  class="search-car__display-link" *ngFor="let car of cards ; let i index" >
                        <a [routerLink]="['/car-detail', car.id]">
                            <car-card [car]="i"></car-card>
                        </a>
                    </li>
                </mdb-slide>
</mdb-carousel>