Javascript 需要帮助修复和创建旋转木马js函数或css样式（6）

我在创建和修复旋转木马动画时遇到问题。大多数旋转木马每个屏幕只有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>

键盘箭头左键
{{prod.title}
键盘箭头右键

图片如下：

预期：类似于旋转木马，在单击“下一步”和“上一步”按钮时有延迟

实际：立即转到下一个或上一个