Class CarouselEngine

src/CarouselEngine.ts:15–310

};

export class CarouselEngine extends Emitter {
  element: HTMLElement | null = null;
  snapPoints: number[] = [];

  #_index = 0;

  #layoutTimeout = 0;
  #scrollThrottle = 0;
  #resizeTimeout = 0;
  #width = 0;
  #maxScroll = 0;
  #touching = false;
  #snap = false;
  #initialized = false;
  #inertia = false;
  #mouseDrag = false;
  #disableUpdate = false;

  #dragger?: DragEngine;
  #motion?: Motion;

  #wheelTimeout = 0;
  #focusTimeout = 0;

  get #length() {
    return this.snapPoints.length;
  }

  get #index() {
    return this.#_index;
  }
  set #index(val) {
    if (val >= 0 && val < this.#length && val !== this.#index) {
      this.#_index = val;
      this.emit('change');
    }
  }

  // used for controlling the carousel from userland
  get index() {
    return this.#index;
  }
  set index(val: number) {
    const prevIndex = this.#index;
    this.#index = val;
    // if the index has changed then we need to sync the scroll to the new index
    if (prevIndex !== this.#index) {
      this.#disableUpdate = true;
      this.#syncScroll();
    }
  }

  get canScrollPrev() {
    return this.index > 0;
  }
  get canScrollNext() {
    return this.index < this.#length - 1;
  }