Now you're ready to position the elements.

Update the top of the render method to look like this:

render() {
  const p = this.selectedInternal;
  const s = (this.selectedInternal =
    this.hasValidSelected() ? this.selected : this.selectedInternal);
  const shouldMove = this.hasUpdated && s !== p;
  const atStart = p === 0;
  const toStart = s === 0;
  const atEnd = p === this.maxSelected;
  const toEnd = s === this.maxSelected;
  const shouldAdvance = shouldMove &&
    (atEnd ? toStart : atStart ? !toEnd : s > p);
  const delta = (shouldMove ? Number(shouldAdvance) || -1 : 0) * 100;
  this.left -= delta;
  const animateLeft = `${this.left}%`;
  const selectedLeft = `${-this.left}%`;
  const previousLeft = `${-this.left - delta}%`;

There's a bit of code here to review. It leverages the previously added code to help position the elements.

First, shouldMove is computed based on the selectedInternal tracking property changing and using ReactiveElement's hasUpdated property to avoid animating the first render.

Then, shouldAdvance is computed so that the position advances if the selected item increases, with the positioning reversed when wrapping to the start or end.

The move delta is calculated based on shouldMove and shouldAdvance. The left property stores a % value indicating where the slot "container" element should be positioned and is calculated using the move delta. left is stored as a property on the element so re-renders apply the appropriate value even if the selected property has not changed.

Finally, the positions are set based on the left property. The animating container (animateLeft) is the position stored in left. The selected item (selectedLeft) needs to be shown, so it's the inverse of left. And for the previous item (previousLeft), it's placed to the left or right of the selected item based on the move delta.

If that's all done correctly, the carousel's behavior should be the same as the previous step when you click and shift-click the element.

If you'd like to verify the positioning of the previous item, open the styles module and remove overflow: hidden in the :host selector.