轮播现在显示了它的第一个子项目，但没有办法更改显示的内容。它需要一个 selected 属性来控制显示哪个项目。

在 render 方法上方添加 selected 属性访问器和相关代码。

motion-carousel

private selectedInternal = 0;
@property({type: Number})
selected = 0;

get maxSelected() {
  return this.childElementCount - 1;
}

hasValidSelected() {
  return this.selected >= 0 && this.selected <= this.maxSelected;
}

render() {
  if (this.hasValidSelected()) {
    this.selectedInternal = this.selected;
  }
  // ...

static properties = { selected: {type: Number} };

selectedInternal = 0;
constructor () {
  super();
  this.selected = 0;
}

get maxSelected() {
  return this.childElementCount - 1;
}

hasValidSelected() {
  return this.selected >= 0 && this.selected <= this.maxSelected;
}

render() {
  if (this.hasValidSelected()) {
    this.selectedInternal = this.selected;
  }
  // ...

用户可以将 selected 设置为任意值，但只有在轮播项目总数范围内的数字才是有效的选择。 selectedInternal 私有属性被限制在这个有效范围内，并将在后续步骤中使用。