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>

Спасибо!