Angular - 如何为li标签制作简单的旋转木马

Question

我想制作一个li标签的轮播。

我有一个数组中的图像：

export class ProducersComponent implements OnInit {

  //Producer icons
  items = [
    '../../../assets/producers/1.png', 
    '../../../assets/producers/2.png', 
    '../../../assets/producers/3.png', 
    '../../../assets/producers/4.jpg', 
    '../../../assets/producers/5.png', 
    '../../../assets/producers/6.png', 
    '../../../assets/producers/7.jpg', 
    '../../../assets/producers/8.png'
  ];

  //Holds current window width
  innerWidth;

  //Holds index number of first and last icon displayed on screen
  firstItemToPrint;
  lastItemToPrint;

  //Updates the window width
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.innerWidth = window.innerWidth;
    //Changes the number of icons displayed on small and wider screens
    if (this.innerWidth < 600) {
      this.firstItemToPrint = 0;
      this.lastItemToPrint = 4
    } else {
      this.firstItemToPrint = 0;
      this.lastItemToPrint = 8
    }
  }

  constructor() { }

  ngOnInit() {
    this.onResize(event);
    // Changes the icons on slider
    setInterval(()=>{
      let itemToMove = this.items.shift();
      this.items.push(itemToMove);
    },3000)
  }
}

首先，我只做了一个改变顺序的简单间隔。 但是在这个解决方案中，元素只是0/1。 我怎么能看起来像旋转木马？

我的HTML：

<div class="container">
  <ul>
    <li *ngFor="let item of items | slice:firstItemToPrint:lastItemToPrint">
      <div [ngStyle]="{'background-image': 'url(' + item + ')'}"  class="producers">

      </div>
    </li>
  </ul>
</div>

谢谢！