Блог

У меня возникла проблема с созданием и исправлением анимации карусели. Большинство каруселей только по 1 на экран, в то время как мне нужно 4 на экран, поэтому я пытаюсь реализовать свою собственную карусель.

Текущий html:

 <div class="display-flex m-t-2">
    <div [ngClass]="{ 'disabled-button': page === 1, 'cursor-pointer': page > 1}" (click)="prev()">
        <i class="material-icons">keyboard_arrow_left</i>
    </div>
    <div class="display-flex-child width-100">
        <div class="m-x-2" *ngFor="let prod of productList">
            <div class="display-flex flex-direction">
                <div class="text-title">{{prod.title}}</div>
                <div>
                    <img [src]="prod.url" alt="{{prod.title}}" height="200" width="200">
                </div>
            </div>
        </div>
    </div>
    <div [ngClass]="{ 'justify-content-right disabled-button': !hasNextValues, 
        'justify-content-right cursor-pointer': hasNextValues}" (click)="next()">
        <i class="material-icons">keyboard_arrow_right</i>
    </div>
</div>
  

Изображение здесь:
Изображение результата HTML-кода

Ожидается: будет похоже на карусель с задержкой при нажатии кнопки next и previous

Актуально: мгновенно переходит к следующему или предыдущему