The slots need to be updated to correctly render the previous and currently selected items.

Add this code above the selected property accessor:

import {customElement, property, query} from 'lit/decorators.js';
...
export class MotionCarousel extends LitElement {
  @query('slot[name="selected"]', true)
  private selectedSlot!: HTMLSlotElement;

  @query('slot[name="previous"]', true)
  private previousSlot!: HTMLSlotElement;
  ...

get selectedSlot() {
  return (this.__selectedSlot ??=
    this.renderRoot?.querySelector('slot[name="selected"]') ?? null);
}

get previousSlot() {
  return (this.__previousSlot ??=
    this.renderRoot?.querySelector('slot[name="previous"]') ?? null);
}

The @query decorator provides convenient access to the slot elements. This will be used to see their currently assignedElements.

querySelector provides convenient access to the slot elements. This will be used to see their currently assignedElements.

Find the updateSlots method and change it as follows:

private updateSlots() {
  // unset old slot state
  this.selectedSlot.assignedElements()[0]?.removeAttribute('slot');
  this.previousSlot.assignedElements()[0]?.removeAttribute('slot');
  // set slots
  this.children[this.previous]?.setAttribute('slot', 'previous');
  this.children[this.selected]?.setAttribute('slot', 'selected');
}

updateSlots() {
  // unset old slot state
  this.selectedSlot.assignedElements()[0]?.removeAttribute('slot');
  this.previousSlot.assignedElements()[0]?.removeAttribute('slot');
  // set slots
  this.children[this.previous]?.setAttribute('slot', 'previous');
  this.children[this.selected]?.setAttribute('slot', 'selected');
}

The updateSlots method removes any currently assigned elements and then slots in the items for the previous and selected values.