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

我想做一个

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)
  }
}

导出类ProducerComponent实现OnInit{
//制作人图标
项目=[
“../../../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”
];
//保持当前窗口宽度
内宽；
//保存屏幕上显示的第一个和最后一个图标的索引号
第一项印刷；
最后一项印刷；
//更新窗口宽度
@HostListener（'窗口：调整大小'，['$event']））
onResize（事件）{
this.innerWidth=window.innerWidth；
//更改小屏幕和宽屏幕上显示的图标数量
如果（该宽度小于600）{
this.firstItemToPrint=0；
this.lastItemTopPrint=4
}否则{
this.firstItemToPrint=0；
this.lastItemTopPrint=8
}
}
构造函数（）{}
恩戈尼尼特（）{
此.onResize（事件）；
//更改滑块上的图标
设置间隔（（）=>{
让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>

---

谢谢

“apper 0/1”是什么意思？切片必须是firstItemToPrint:lastItemToPrint+1我的意思是它跳过并且不设置动画。