Now that selection is implemented, add a way to control which item is selected.

There are a lot of options here; for example, you could provide buttons or support swiping. For simplicity you'll change what's selected when the user clicks on the carousel.

Update the return statement in the render method to add the @click expression:

  return html`
    <div class="fit" @click=${this.clickHandler}>

Then add the clickHandler method below render:

private clickHandler(e: MouseEvent) {
  const i = this.selected + (Number(!e.shiftKey) || -1);
  this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
  const change = new CustomEvent('change',
    {detail: this.selected, bubbles: true, composed: true});
  this.dispatchEvent(change);
}

clickHandler(e) {
  const i = this.selected + (Number(!e.shiftKey) || -1);
  this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
  const change = new CustomEvent('change',
    {detail: this.selected, bubbles: true, composed: true});
  this.dispatchEvent(change);
}

The @click expression in the template calls the clickHandler method when the user clicks on the carousel. The event handler advances the selected property, using the event's shiftKey property to allow the user to go back. The value wraps to the first or last item when needed.

Since the element is changing the selected property based on user interactivity, it should send an event describing what happened so other application code can easily respond. The event name is change and it sends the selected item info as its detail.

Go ahead and try it out in the preview to make sure everything works.