@materializecss/materialize 2.0.0-alpha → 2.0.2-alpha

package/src/carousel.ts

@@ -1,607 +1,676 @@
-import { Component } from "./component";
-import { M } from "./global";
-
-  let _defaults = {
-    duration: 200, // ms
-    dist: -100, // zoom scale TODO: make this more intuitive as an option
-    shift: 0, // spacing for center image
-    padding: 0, // Padding between non center items
-    numVisible: 5, // Number of visible items in carousel
-    fullWidth: false, // Change to full width styles
-    indicators: false, // Toggle indicators
-    noWrap: false, // Don't wrap around and cycle through items.
-    onCycleTo: null // Callback for when a new slide is cycled to.
-  };
-
-  export class Carousel extends Component {
-    el: HTMLElement;
-    hasMultipleSlides: boolean;
-    showIndicators: boolean;
-    noWrap: any;
-    pressed: boolean;
-    dragged: boolean;
-    offset: number;
-    target: number;
-    images: HTMLElement[];
-    itemWidth: any;
-    itemHeight: any;
-    dim: number;
-    _autoScrollBound: any;
-    _trackBound: any;
-    _indicators: any;
-    count: number;
-    xform: string;
-    private _handleCarouselTapBound: any;
-    private _handleCarouselDragBound: any;
-    private _handleCarouselReleaseBound: any;
-    private _handleCarouselClickBound: any;
-    _handleIndicatorClickBound: any;
-    _handleThrottledResizeBound: any;
-    verticalDragged: boolean;
-    reference: any;
-    referenceY: any;
-    velocity: number;
-    frame: number;
-    timestamp: number;
-    ticker: NodeJS.Timer;
-    amplitude: number;
-    center: number = 0;
-    imageHeight: any;
-    scrollingTimeout: any;
-    oneTimeCallback: any;
-
-    constructor(el: Element, options: Object) {
-      super(Carousel, el, options);
-      (this.el as any).M_Carousel = this;
-      this.options = {...Carousel.defaults, ...options};
-
-      // Setup
-      this.hasMultipleSlides = this.el.querySelectorAll('.carousel-item').length > 1;
-      this.showIndicators = this.options.indicators && this.hasMultipleSlides;
-      this.noWrap = this.options.noWrap || !this.hasMultipleSlides;
-      this.pressed = false;
-      this.dragged = false;
-      this.offset = this.target = 0;
-      this.images = [];
-      this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
-      this.itemHeight = this.el.querySelector('.carousel-item').clientHeight;
-      this.dim = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions.
-      this._autoScrollBound = this._autoScroll.bind(this);
-      this._trackBound = this._track.bind(this);
+import { Utils } from "./utils";
+import { Component, BaseOptions, InitElements, MElement } from "./component";
+
+export interface CarouselOptions extends BaseOptions{
+  /**
+   * Transition duration in milliseconds.
+   * @default 200
+   */
+  duration: number;
+  /**
+   * Perspective zoom. If 0, all items are the same size.
+   * @default -100
+   */
+  dist: number;
+  /**
+   * Set the spacing of the center item.
+   * @default 0
+   */
+  shift: number;
+  /**
+   * Set the padding between non center items.
+   * @default 0
+   */
+  padding: number;
+  /**
+   * Set the number of visible items.
+   * @default 5
+   */
+  numVisible: number;
+  /**
+   * Make the carousel a full width slider like the second example.
+   * @default false
+   */
+  fullWidth: boolean;
+  /**
+   * Set to true to show indicators.
+   * @default false
+   */
+  indicators: boolean;
+  /**
+   * Don't wrap around and cycle through items.
+   * @default false
+   */
+  noWrap: boolean;
+  /**
+   * Callback for when a new slide is cycled to.
+   * @default null
+   */
+  onCycleTo: (current: Element, dragged: boolean) => void;
+}
+
+let _defaults: CarouselOptions = {
+  duration: 200, // ms
+  dist: -100, // zoom scale TODO: make this more intuitive as an option
+  shift: 0, // spacing for center image
+  padding: 0, // Padding between non center items
+  numVisible: 5, // Number of visible items in carousel
+  fullWidth: false, // Change to full width styles
+  indicators: false, // Toggle indicators
+  noWrap: false, // Don't wrap around and cycle through items.
+  onCycleTo: null // Callback for when a new slide is cycled to.
+};
+
+export class Carousel extends Component<CarouselOptions> {
+  hasMultipleSlides: boolean;
+  showIndicators: boolean;
+  noWrap: boolean;
+  /** If the carousel is being clicked or tapped. */
+  pressed: boolean;
+  /** If the carousel is currently being dragged. */
+  dragged: boolean;
+  offset: number;
+  target: number;
+  images: HTMLElement[];
+  itemWidth: any;
+  itemHeight: any;
+  dim: number;
+  _indicators: any;
+  count: number;
+  xform: string;
+  verticalDragged: boolean;
+  reference: any;
+  referenceY: any;
+  velocity: number;
+  frame: number;
+  timestamp: number;
+  ticker: NodeJS.Timer;
+  amplitude: number;
+  /** The index of the center carousel item. */
+  center: number = 0;
+  imageHeight: any;
+  scrollingTimeout: any;
+  oneTimeCallback: any;
+
+  constructor(el: HTMLElement, options: Partial<CarouselOptions>) {
+    super(el, options, Carousel);
+    (this.el as any).M_Carousel = this;
+
+    this.options = {
+      ...Carousel.defaults,
+      ...options
+    };
+
+    // Setup
+    this.hasMultipleSlides = this.el.querySelectorAll('.carousel-item').length > 1;
+    this.showIndicators = this.options.indicators && this.hasMultipleSlides;
+    this.noWrap = this.options.noWrap || !this.hasMultipleSlides;
+    this.pressed = false;
+    this.dragged = false;
+    this.offset = this.target = 0;
+    this.images = [];
+    this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
+    this.itemHeight = this.el.querySelector('.carousel-item').clientHeight;
+    this.dim = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions.
+
+    // Full Width carousel setup
+    if (this.options.fullWidth) {
+      this.options.dist = 0;
+      this._setCarouselHeight();
+
+      // Offset fixed items when indicators.
+      if (this.showIndicators) {
+        this.el.querySelector('.carousel-fixed-item')?.classList.add('with-indicators');
+      }
+    }
 
-      // Full Width carousel setup
-      if (this.options.fullWidth) {
-        this.options.dist = 0;
-        this._setCarouselHeight();
+    // Iterate through slides
+    this._indicators = document.createElement('ul');
+    this._indicators.classList.add('indicators');
 
-        // Offset fixed items when indicators.
-        if (this.showIndicators) {
-          this.el.querySelector('.carousel-fixed-item')?.classList.add('with-indicators');
+    this.el.querySelectorAll('.carousel-item').forEach((item: HTMLElement, i) => {
+      this.images.push(item);
+      if (this.showIndicators) {
+        const indicator = document.createElement('li');
+        indicator.classList.add('indicator-item');
+        if (i === 0) {
+          indicator.classList.add('active');
         }
+        this._indicators.appendChild(indicator);
       }
+    });
 
-      // Iterate through slides
-      this._indicators = document.createElement('ul');
-      this._indicators.classList.add('indicators');
-
-      this.el.querySelectorAll('.carousel-item').forEach((item: HTMLElement, i) => {
-        this.images.push(item);
-        if (this.showIndicators) {
-          const indicator = document.createElement('li');
-          indicator.classList.add('indicator-item');
-          if (i === 0) {
-            indicator.classList.add('active');
-          }
-          this._indicators.appendChild(indicator);
-        }
-      });
-
-      if (this.showIndicators)
-        this.el.appendChild(this._indicators);
+    if (this.showIndicators)
+      this.el.appendChild(this._indicators);
 
-      this.count = this.images.length;
+    this.count = this.images.length;
 
-      // Cap numVisible at count
-      this.options.numVisible = Math.min(this.count, this.options.numVisible);
+    // Cap numVisible at count
+    this.options.numVisible = Math.min(this.count, this.options.numVisible);
 
-      // Setup cross browser string
-      this.xform = 'transform';
-      ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
-        var e = prefix + 'Transform';
-        if (typeof document.body.style[e] !== 'undefined') {
-          this.xform = e;
-          return false;
-        }
-        return true;
-      });
-
-      this._setupEventHandlers();
-      this._scroll(this.offset);
-    }
-
-    static get defaults() {
-      return _defaults;
+    // Setup cross browser string
+    this.xform = 'transform';
+    ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
+      var e = prefix + 'Transform';
+      if (typeof document.body.style[e] !== 'undefined') {
+        this.xform = e;
+        return false;
+      }
+      return true;
+    });
+
+    this._setupEventHandlers();
+    this._scroll(this.offset);
+  }
+
+  static get defaults(): CarouselOptions {
+    return _defaults;
+  }
+
+  /**
+   * Initializes instance of Carousel.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<CarouselOptions>): Carousel;
+  /**
+   * Initializes instances of Carousel.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<CarouselOptions>): Carousel[];
+  /**
+   * Initializes instances of Carousel.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<CarouselOptions> = {}): Carousel | Carousel[] {
+    return super.init(els, options, Carousel);
+  }
+
+  static getInstance(el: HTMLElement): Carousel {
+    return (el as any).M_Carousel;
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    (this.el as any).M_Carousel = undefined;
+  }
+
+  _setupEventHandlers() {
+    if (typeof window.ontouchstart !== 'undefined') {
+      this.el.addEventListener('touchstart', this._handleCarouselTap);
+      this.el.addEventListener('touchmove', this._handleCarouselDrag);
+      this.el.addEventListener('touchend', this._handleCarouselRelease);
     }
-
-    static init(els, options) {
-      return super.init(this, els, options);
+    this.el.addEventListener('mousedown', this._handleCarouselTap);
+    this.el.addEventListener('mousemove', this._handleCarouselDrag);
+    this.el.addEventListener('mouseup', this._handleCarouselRelease);
+    this.el.addEventListener('mouseleave', this._handleCarouselRelease);
+    this.el.addEventListener('click', this._handleCarouselClick);
+    if (this.showIndicators && this._indicators) {
+      this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+        el.addEventListener('click', this._handleIndicatorClick);
+      });
     }
-
-    static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_Carousel;
+    // Resize
+    window.addEventListener('resize', this._handleThrottledResize);
+  }
+
+  _removeEventHandlers() {
+    if (typeof window.ontouchstart !== 'undefined') {
+      this.el.removeEventListener('touchstart', this._handleCarouselTap);
+      this.el.removeEventListener('touchmove', this._handleCarouselDrag);
+      this.el.removeEventListener('touchend', this._handleCarouselRelease);
     }
-
-    destroy() {
-      this._removeEventHandlers();
-      (this.el as any).M_Carousel = undefined;
+    this.el.removeEventListener('mousedown', this._handleCarouselTap);
+    this.el.removeEventListener('mousemove', this._handleCarouselDrag);
+    this.el.removeEventListener('mouseup', this._handleCarouselRelease);
+    this.el.removeEventListener('mouseleave', this._handleCarouselRelease);
+    this.el.removeEventListener('click', this._handleCarouselClick);
+    if (this.showIndicators && this._indicators) {
+      this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+        el.removeEventListener('click', this._handleIndicatorClick);
+      });
     }
+    window.removeEventListener('resize', this._handleThrottledResize);
+  }
 
-    _setupEventHandlers() {
-      this._handleCarouselTapBound = this._handleCarouselTap.bind(this);
-      this._handleCarouselDragBound = this._handleCarouselDrag.bind(this);
-      this._handleCarouselReleaseBound = this._handleCarouselRelease.bind(this);
-      this._handleCarouselClickBound = this._handleCarouselClick.bind(this);
-      if (typeof window.ontouchstart !== 'undefined') {
-        this.el.addEventListener('touchstart', this._handleCarouselTapBound);
-        this.el.addEventListener('touchmove', this._handleCarouselDragBound);
-        this.el.addEventListener('touchend', this._handleCarouselReleaseBound);
-      }
-      this.el.addEventListener('mousedown', this._handleCarouselTapBound);
-      this.el.addEventListener('mousemove', this._handleCarouselDragBound);
-      this.el.addEventListener('mouseup', this._handleCarouselReleaseBound);
-      this.el.addEventListener('mouseleave', this._handleCarouselReleaseBound);
-      this.el.addEventListener('click', this._handleCarouselClickBound);
-      if (this.showIndicators && this._indicators) {
-        this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
-        this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
-          el.addEventListener('click', this._handleIndicatorClickBound);
-        });
-      }
-      // Resize
-      let throttledResize = M.throttle(this._handleResize, 200, null);
-      this._handleThrottledResizeBound = throttledResize.bind(this);
-      window.addEventListener('resize', this._handleThrottledResizeBound);
-    }
+  _handleThrottledResize: () => void = Utils.throttle(function(){ this._handleResize(); }, 200, null).bind(this);
 
-    _removeEventHandlers() {
-      if (typeof window.ontouchstart !== 'undefined') {
-        this.el.removeEventListener('touchstart', this._handleCarouselTapBound);
-        this.el.removeEventListener('touchmove', this._handleCarouselDragBound);
-        this.el.removeEventListener('touchend', this._handleCarouselReleaseBound);
-      }
-      this.el.removeEventListener('mousedown', this._handleCarouselTapBound);
-      this.el.removeEventListener('mousemove', this._handleCarouselDragBound);
-      this.el.removeEventListener('mouseup', this._handleCarouselReleaseBound);
-      this.el.removeEventListener('mouseleave', this._handleCarouselReleaseBound);
-      this.el.removeEventListener('click', this._handleCarouselClickBound);
-      if (this.showIndicators && this._indicators) {
-        this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
-          el.removeEventListener('click', this._handleIndicatorClickBound);
-        });
-      }
-      window.removeEventListener('resize', this._handleThrottledResizeBound);
+  _handleCarouselTap = (e: MouseEvent | TouchEvent) => {
+    // Fixes firefox draggable image bug
+    if (e.type === 'mousedown' && (<HTMLElement>e.target).tagName === 'IMG') {
+      e.preventDefault();
     }
-
-    _handleCarouselTap(e) {
-      // Fixes firefox draggable image bug
-      if (e.type === 'mousedown' && (<HTMLElement>e.target).tagName === 'IMG') {
-        e.preventDefault();
-      }
-      this.pressed = true;
-      this.dragged = false;
-      this.verticalDragged = false;
-      this.reference = this._xpos(e);
-      this.referenceY = this._ypos(e);
-
-      this.velocity = this.amplitude = 0;
-      this.frame = this.offset;
-      this.timestamp = Date.now();
-      clearInterval(this.ticker);
-      this.ticker = setInterval(this._trackBound, 100);
-    }
-
-    _handleCarouselDrag(e) {
-      let x, y, delta, deltaY;
-      if (this.pressed) {
-        x = this._xpos(e);
-        y = this._ypos(e);
-        delta = this.reference - x;
-        deltaY = Math.abs(this.referenceY - y);
-        if (deltaY < 30 && !this.verticalDragged) {
-          // If vertical scrolling don't allow dragging.
-          if (delta > 2 || delta < -2) {
-            this.dragged = true;
-            this.reference = x;
-            this._scroll(this.offset + delta);
-          }
-        } else if (this.dragged) {
-          // If dragging don't allow vertical scroll.
-          e.preventDefault();
-          e.stopPropagation();
-          return false;
-        } else {
-          // Vertical scrolling.
-          this.verticalDragged = true;
+    this.pressed = true;
+    this.dragged = false;
+    this.verticalDragged = false;
+    this.reference = this._xpos(e);
+    this.referenceY = this._ypos(e);
+
+    this.velocity = this.amplitude = 0;
+    this.frame = this.offset;
+    this.timestamp = Date.now();
+    clearInterval(this.ticker);
+    this.ticker = setInterval(this._track, 100);
+  }
+
+  _handleCarouselDrag = (e: MouseEvent | TouchEvent) => {
+    let x: number, y: number, delta: number, deltaY: number;
+    if (this.pressed) {
+      x = this._xpos(e);
+      y = this._ypos(e);
+      delta = this.reference - x;
+      deltaY = Math.abs(this.referenceY - y);
+      if (deltaY < 30 && !this.verticalDragged) {
+        // If vertical scrolling don't allow dragging.
+        if (delta > 2 || delta < -2) {
+          this.dragged = true;
+          this.reference = x;
+          this._scroll(this.offset + delta);
         }
-      }
-      if (this.dragged) {
+      } else if (this.dragged) {
         // If dragging don't allow vertical scroll.
         e.preventDefault();
         e.stopPropagation();
         return false;
+      } else {
+        // Vertical scrolling.
+        this.verticalDragged = true;
       }
     }
+    if (this.dragged) {
+      // If dragging don't allow vertical scroll.
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  }
 
-    _handleCarouselRelease(e) {
-      if (this.pressed) {
-        this.pressed = false;
-      } else {
-        return;
-      }
-      clearInterval(this.ticker);
-      this.target = this.offset;
-      if (this.velocity > 10 || this.velocity < -10) {
-        this.amplitude = 0.9 * this.velocity;
-        this.target = this.offset + this.amplitude;
-      }
-      this.target = Math.round(this.target / this.dim) * this.dim;
-      // No wrap of items.
-      if (this.noWrap) {
-        if (this.target >= this.dim * (this.count - 1)) {
-          this.target = this.dim * (this.count - 1);
-        } else if (this.target < 0) {
-          this.target = 0;
-        }
-      }
-      this.amplitude = this.target - this.offset;
-      this.timestamp = Date.now();
-      requestAnimationFrame(this._autoScrollBound);
-      if (this.dragged) {
-        e.preventDefault();
-        e.stopPropagation();
+  _handleCarouselRelease = (e: MouseEvent | TouchEvent) => {
+    if (this.pressed) {
+      this.pressed = false;
+    } else {
+      return;
+    }
+    clearInterval(this.ticker);
+    this.target = this.offset;
+    if (this.velocity > 10 || this.velocity < -10) {
+      this.amplitude = 0.9 * this.velocity;
+      this.target = this.offset + this.amplitude;
+    }
+    this.target = Math.round(this.target / this.dim) * this.dim;
+    // No wrap of items.
+    if (this.noWrap) {
+      if (this.target >= this.dim * (this.count - 1)) {
+        this.target = this.dim * (this.count - 1);
+      } else if (this.target < 0) {
+        this.target = 0;
       }
-      return false;
     }
+    this.amplitude = this.target - this.offset;
+    this.timestamp = Date.now();
+    requestAnimationFrame(this._autoScroll);
+    if (this.dragged) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    return false;
+  }
 
-    _handleCarouselClick(e) {
-      // Disable clicks if carousel was dragged.
-      if (this.dragged) {
+  _handleCarouselClick = (e: MouseEvent | TouchEvent) => {
+    // Disable clicks if carousel was dragged.
+    if (this.dragged) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+    else if (!this.options.fullWidth) {
+      const clickedElem = (<HTMLElement>e.target).closest('.carousel-item');
+      if (!clickedElem) return;
+      const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem);
+      const diff = this._wrap(this.center) - clickedIndex;
+      // Disable clicks if carousel was shifted by click
+      if (diff !== 0) {
         e.preventDefault();
         e.stopPropagation();
-        return false;
       }
-      else if (!this.options.fullWidth) {
-        const clickedElem = (<HTMLElement>e.target).closest('.carousel-item');
-        const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem);
-        const diff = this._wrap(this.center) - clickedIndex;
-        // Disable clicks if carousel was shifted by click
-        if (diff !== 0) {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-        // fixes https://github.com/materializecss/materialize/issues/180
-        if (clickedIndex < 0) {
-          // relative X position > center of carousel = clicked at the right part of the carousel
-          if (e.clientX - e.target.getBoundingClientRect().left > this.el.clientWidth / 2) {
-            this.next();
-          } else {
-            this.prev();
-          }
+      // fixes https://github.com/materializecss/materialize/issues/180
+      if (clickedIndex < 0) {
+        // relative X position > center of carousel = clicked at the right part of the carousel
+        if ((e as MouseEvent).clientX - (e.target as HTMLElement).getBoundingClientRect().left > this.el.clientWidth / 2) {
+          this.next();
         } else {
-          this._cycleTo(clickedIndex);
+          this.prev();
         }
+      } else {
+        this._cycleTo(clickedIndex);
       }
     }
+  }
 
-    _handleIndicatorClick(e: Event) {
-      e.stopPropagation();
-      const indicator = (<HTMLElement>e.target).closest('.indicator-item');
-      if (indicator) {
-        const index = [...indicator.parentNode.children].indexOf(indicator);
-        this._cycleTo(index);
-      }
+  _handleIndicatorClick = (e: Event) => {
+    e.stopPropagation();
+    const indicator = (<HTMLElement>e.target).closest('.indicator-item');
+    if (indicator) {
+      const index = [...indicator.parentNode.children].indexOf(indicator);
+      this._cycleTo(index);
     }
+  }
 
-    _handleResize(e) {
-      if (this.options.fullWidth) {
-        this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
-        this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight;
-        this.dim = this.itemWidth * 2 + this.options.padding;
-        this.offset = this.center * 2 * this.itemWidth;
-        this.target = this.offset;
-        this._setCarouselHeight(true);
-      }
-      else {
-        this._scroll();
-      }
+  _handleResize = () => {
+    if (this.options.fullWidth) {
+      this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
+      this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight;
+      this.dim = this.itemWidth * 2 + this.options.padding;
+      this.offset = this.center * 2 * this.itemWidth;
+      this.target = this.offset;
+      this._setCarouselHeight(true);
     }
-
-    _setCarouselHeight(imageOnly: boolean = false) {
-      const firstSlide = this.el.querySelector('.carousel-item.active')
-        ? this.el.querySelector('.carousel-item.active')
-        : this.el.querySelector('.carousel-item');
-
-      const firstImage = firstSlide.querySelector('img');
-      if (firstImage) {
-        if (firstImage.complete) {
-          // If image won't trigger the load event
-          const imageHeight = firstImage.clientHeight;
-          if (imageHeight > 0) {
-            this.el.style.height = imageHeight+'px';
-          }
-          else {
-            // If image still has no height, use the natural dimensions to calculate
-            const naturalWidth = firstImage.naturalWidth;
-            const naturalHeight = firstImage.naturalHeight;
-            const adjustedHeight = (this.el.clientWidth / naturalWidth) * naturalHeight;
-            this.el.style.height = adjustedHeight+'px';
-          }
-        } else {
-          // Get height when image is loaded normally
-          firstImage.addEventListener('load', () => {
-            this.el.style.height = firstImage.offsetHeight+'px';
-          });
+    else {
+      this._scroll();
+    }
+  }
+
+  _setCarouselHeight(imageOnly: boolean = false) {
+    const firstSlide = this.el.querySelector('.carousel-item.active')
+      ? this.el.querySelector('.carousel-item.active')
+      : this.el.querySelector('.carousel-item');
+
+    const firstImage = firstSlide.querySelector('img');
+    if (firstImage) {
+      if (firstImage.complete) {
+        // If image won't trigger the load event
+        const imageHeight = firstImage.clientHeight;
+        if (imageHeight > 0) {
+          this.el.style.height = imageHeight+'px';
         }
+        else {
+          // If image still has no height, use the natural dimensions to calculate
+          const naturalWidth = firstImage.naturalWidth;
+          const naturalHeight = firstImage.naturalHeight;
+          const adjustedHeight = (this.el.clientWidth / naturalWidth) * naturalHeight;
+          this.el.style.height = adjustedHeight+'px';
+        }
+      } else {
+        // Get height when image is loaded normally
+        firstImage.addEventListener('load', () => {
+          this.el.style.height = firstImage.offsetHeight+'px';
+        });
       }
-      else if (!imageOnly) {
-        const slideHeight = firstSlide.clientHeight;
-        this.el.style.height = slideHeight+'px';
-      }
     }
+    else if (!imageOnly) {
+      const slideHeight = firstSlide.clientHeight;
+      this.el.style.height = slideHeight+'px';
+    }
+  }
 
-    _xpos(e) {
-      // touch event
-      if (e.targetTouches && e.targetTouches.length >= 1) {
-        return e.targetTouches[0].clientX;
+  _xpos(e: MouseEvent | TouchEvent) {
+    // touch event
+    if (e.type.startsWith("touch") && (e as TouchEvent).targetTouches.length >= 1) {
+      return (e as TouchEvent).targetTouches[0].clientX;
+    }
+    // mouse event
+    return (e as MouseEvent).clientX;
+  }
+
+  _ypos(e: MouseEvent | TouchEvent) {
+    // touch event
+    if (e.type.startsWith("touch") && (e as TouchEvent).targetTouches.length >= 1) {
+      return (e as TouchEvent).targetTouches[0].clientY;
+    }
+    // mouse event
+    return (e as MouseEvent).clientY;
+  }
+
+  _wrap(x: number) {
+    return x >= this.count
+      ? x % this.count
+      : x < 0
+      ? this._wrap(this.count + (x % this.count))
+      : x;
+  }
+
+  _track = () => {
+    let now: number, elapsed: number, delta: number, v: number;
+    now = Date.now();
+    elapsed = now - this.timestamp;
+    this.timestamp = now;
+    delta = this.offset - this.frame;
+    this.frame = this.offset;
+    v = (1000 * delta) / (1 + elapsed);
+    this.velocity = 0.8 * v + 0.2 * this.velocity;
+  }
+
+  _autoScroll = () => {
+    let elapsed: number, delta: number;
+    if (this.amplitude) {
+      elapsed = Date.now() - this.timestamp;
+      delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
+      if (delta > 2 || delta < -2) {
+        this._scroll(this.target - delta);
+        requestAnimationFrame(this._autoScroll);
+      } else {
+        this._scroll(this.target);
       }
-      // mouse event
-      return e.clientX;
     }
+  }
 
-    _ypos(e) {
-      // touch event
-      if (e.targetTouches && e.targetTouches.length >= 1) {
-        return e.targetTouches[0].clientY;
-      }
-      // mouse event
-      return e.clientY;
-    }
-
-    _wrap(x: number) {
-      return x >= this.count
-        ? x % this.count
-        : x < 0
-        ? this._wrap(this.count + (x % this.count))
-        : x;
-    }
-
-    _track() {
-      let now, elapsed, delta, v;
-      now = Date.now();
-      elapsed = now - this.timestamp;
-      this.timestamp = now;
-      delta = this.offset - this.frame;
-      this.frame = this.offset;
-      v = (1000 * delta) / (1 + elapsed);
-      this.velocity = 0.8 * v + 0.2 * this.velocity;
-    }
-
-    _autoScroll() {
-      let elapsed, delta;
-      if (this.amplitude) {
-        elapsed = Date.now() - this.timestamp;
-        delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
-        if (delta > 2 || delta < -2) {
-          this._scroll(this.target - delta);
-          requestAnimationFrame(this._autoScrollBound);
-        } else {
-          this._scroll(this.target);
-        }
-      }
+  _scroll(x: number = 0) {
+    // Track scrolling state
+    if (!this.el.classList.contains('scrolling')) {
+      this.el.classList.add('scrolling');
+    }
+    if (this.scrollingTimeout != null) {
+      window.clearTimeout(this.scrollingTimeout);
+    }
+    this.scrollingTimeout = window.setTimeout(() => {
+      this.el.classList.remove('scrolling');
+    }, this.options.duration);
+
+    // Start actual scroll
+    let i: number,
+      half: number,
+      delta: number,
+      dir: number,
+      tween: number,
+      el: HTMLElement,
+      alignment: string,
+      zTranslation: number,
+      tweenedOpacity: number,
+      centerTweenedOpacity: number;
+    let lastCenter = this.center;
+    let numVisibleOffset = 1 / this.options.numVisible;
+
+    this.offset = typeof x === 'number' ? x : this.offset;
+    this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
+
+    delta = this.offset - this.center * this.dim;
+    dir = delta < 0 ? 1 : -1;
+    tween = (-dir * delta * 2) / this.dim;
+    half = this.count >> 1;
+
+    if (this.options.fullWidth) {
+      alignment = 'translateX(0)';
+      centerTweenedOpacity = 1;
+    }
+    else {
+      alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
+      alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
+      centerTweenedOpacity = 1 - numVisibleOffset * tween;
     }
 
-    _scroll(x: number = 0) {
-      // Track scrolling state
-      if (!this.el.classList.contains('scrolling')) {
-        this.el.classList.add('scrolling');
+    // Set indicator active
+    if (this.showIndicators) {
+      const diff = this.center % this.count;
+      const activeIndicator = this._indicators.querySelector('.indicator-item.active');
+      const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(activeIndicator);
+      if (activeIndicatorIndex !== diff) {
+        activeIndicator.classList.remove('active');
+        const pos = diff < 0 ? this.count + diff : diff;
+        this._indicators.querySelectorAll('.indicator-item')[pos].classList.add('active');
       }
-      if (this.scrollingTimeout != null) {
-        window.clearTimeout(this.scrollingTimeout);
-      }
-      this.scrollingTimeout = window.setTimeout(() => {
-        this.el.classList.remove('scrolling');
-      }, this.options.duration);
-
-      // Start actual scroll
-      let i,
-        half,
-        delta,
-        dir,
-        tween,
-        el,
-        alignment,
-        zTranslation,
-        tweenedOpacity,
-        centerTweenedOpacity;
-      let lastCenter = this.center;
-      let numVisibleOffset = 1 / this.options.numVisible;
-
-      this.offset = typeof x === 'number' ? x : this.offset;
-      this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
-
-      delta = this.offset - this.center * this.dim;
-      dir = delta < 0 ? 1 : -1;
-      tween = (-dir * delta * 2) / this.dim;
-      half = this.count >> 1;
+    }
 
-      if (this.options.fullWidth) {
-        alignment = 'translateX(0)';
-        centerTweenedOpacity = 1;
-      }
-      else {
-        alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
-        alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
-        centerTweenedOpacity = 1 - numVisibleOffset * tween;
-      }
+    // center
+    // Don't show wrapped items.
+    if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+      el = this.images[this._wrap(this.center)];
 
-      // Set indicator active
-      if (this.showIndicators) {
-        const diff = this.center % this.count;
-        const activeIndicator = this._indicators.querySelector('.indicator-item.active');
-        const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(activeIndicator);
-        if (activeIndicatorIndex !== diff) {
-          activeIndicator.classList.remove('active');
-          const pos = diff < 0 ? this.count + diff : diff;
-          this._indicators.querySelectorAll('.indicator-item')[pos].classList.add('active');
-        }
+      // Add active class to center item.
+      if (!el.classList.contains('active')) {
+        this.el.querySelector('.carousel-item').classList.remove('active');
+        el.classList.add('active');
       }
 
-      // center
-      // Don't show wrapped items.
-      if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
-        el = this.images[this._wrap(this.center)];
-
-        // Add active class to center item.
-        if (!el.classList.contains('active')) {
-          this.el.querySelector('.carousel-item').classList.remove('active');
-          el.classList.add('active');
-        }
-
-        let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
-          this.options.shift *
-          tween *
-          i}px) translateZ(${this.options.dist * tween}px)`;
-        this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
-      }
+      let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
+        this.options.shift *
+        tween *
+        i}px) translateZ(${this.options.dist * tween}px)`;
+      this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+    }
 
-      for (i = 1; i <= half; ++i) {
-        // right side
-        if (this.options.fullWidth) {
-          zTranslation = this.options.dist;
-          tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
-        } else {
-          zTranslation = this.options.dist * (i * 2 + tween * dir);
-          tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
-        }
-        // Don't show wrapped items.
-        if (!this.noWrap || this.center + i < this.count) {
-          el = this.images[this._wrap(this.center + i)];
-          let transformString = `${alignment} translateX(${this.options.shift +
-            (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
-          this._updateItemStyle(el, tweenedOpacity, -i, transformString);
-        }
-        // left side
-        if (this.options.fullWidth) {
-          zTranslation = this.options.dist;
-          tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
-        } else {
-          zTranslation = this.options.dist * (i * 2 - tween * dir);
-          tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
-        }
-        // Don't show wrapped items.
-        if (!this.noWrap || this.center - i >= 0) {
-          el = this.images[this._wrap(this.center - i)];
-          let transformString = `${alignment} translateX(${-this.options.shift +
-            (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
-          this._updateItemStyle(el, tweenedOpacity, -i, transformString);
-        }
+    for (i = 1; i <= half; ++i) {
+      // right side
+      if (this.options.fullWidth) {
+        zTranslation = this.options.dist;
+        tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
+      } else {
+        zTranslation = this.options.dist * (i * 2 + tween * dir);
+        tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
       }
-      // center
       // Don't show wrapped items.
-      if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
-        el = this.images[this._wrap(this.center)];
-        let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
-          this.options.shift *
-          tween}px) translateZ(${this.options.dist * tween}px)`;
-        this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+      if (!this.noWrap || this.center + i < this.count) {
+        el = this.images[this._wrap(this.center + i)];
+        let transformString = `${alignment} translateX(${this.options.shift +
+          (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+        this._updateItemStyle(el, tweenedOpacity, -i, transformString);
       }
-      // onCycleTo callback
-      const _currItem = this.el.querySelectorAll('.carousel-item')[this._wrap(this.center)];
-
-      if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
-        this.options.onCycleTo.call(this, _currItem, this.dragged);
+      // left side
+      if (this.options.fullWidth) {
+        zTranslation = this.options.dist;
+        tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
+      } else {
+        zTranslation = this.options.dist * (i * 2 - tween * dir);
+        tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
       }
-      // One time callback
-      if (typeof this.oneTimeCallback === 'function') {
-        this.oneTimeCallback.call(this, _currItem, this.dragged);
-        this.oneTimeCallback = null;
+      // Don't show wrapped items.
+      if (!this.noWrap || this.center - i >= 0) {
+        el = this.images[this._wrap(this.center - i)];
+        let transformString = `${alignment} translateX(${-this.options.shift +
+          (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+        this._updateItemStyle(el, tweenedOpacity, -i, transformString);
       }
     }
+    // center
+    // Don't show wrapped items.
+    if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+      el = this.images[this._wrap(this.center)];
+      let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
+        this.options.shift *
+        tween}px) translateZ(${this.options.dist * tween}px)`;
+      this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+    }
+    // onCycleTo callback
+    const _currItem = this.el.querySelectorAll('.carousel-item')[this._wrap(this.center)];
 
-    _updateItemStyle(el: HTMLElement, opacity: number, zIndex: number, transform: string) {
-      el.style[this.xform] = transform;
-      el.style.zIndex = zIndex.toString();
-      el.style.opacity = opacity.toString();
-      el.style.visibility = 'visible';
-    }
-
-    _cycleTo(n: number, callback: Function = null) {
-      let diff = (this.center % this.count) - n;
-      // Account for wraparound.
-      if (!this.noWrap) {
-        if (diff < 0) {
-          if (Math.abs(diff + this.count) < Math.abs(diff)) {
-            diff += this.count;
-          }
-        } else if (diff > 0) {
-          if (Math.abs(diff - this.count) < diff) {
-            diff -= this.count;
-          }
-        }
-      }
-      this.target = this.dim * Math.round(this.offset / this.dim);
-      // Next
+    if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
+      this.options.onCycleTo.call(this, _currItem, this.dragged);
+    }
+    // One time callback
+    if (typeof this.oneTimeCallback === 'function') {
+      this.oneTimeCallback.call(this, _currItem, this.dragged);
+      this.oneTimeCallback = null;
+    }
+  }
+
+  _updateItemStyle(el: HTMLElement, opacity: number, zIndex: number, transform: string) {
+    el.style[this.xform] = transform;
+    el.style.zIndex = zIndex.toString();
+    el.style.opacity = opacity.toString();
+    el.style.visibility = 'visible';
+  }
+
+  _cycleTo(n: number, callback: CarouselOptions["onCycleTo"] = null) {
+    let diff = (this.center % this.count) - n;
+    // Account for wraparound.
+    if (!this.noWrap) {
       if (diff < 0) {
-        this.target += this.dim * Math.abs(diff);        
-      } // Prev
-      else if (diff > 0) {
-        this.target -= this.dim * diff;
-      }
-      // Set one time callback
-      if (typeof callback === 'function') {
-        this.oneTimeCallback = callback;
-      }
-      // Scroll
-      if (this.offset !== this.target) {
-        this.amplitude = this.target - this.offset;
-        this.timestamp = Date.now();
-        requestAnimationFrame(this._autoScrollBound);
+        if (Math.abs(diff + this.count) < Math.abs(diff)) {
+          diff += this.count;
+        }
+      } else if (diff > 0) {
+        if (Math.abs(diff - this.count) < diff) {
+          diff -= this.count;
+        }
       }
     }
-
-    next(n: number = 1) {
-      if (n === undefined || isNaN(n)) {
-        n = 1;
-      }
-      let index = this.center + n;
-      if (index >= this.count || index < 0) {
-        if (this.noWrap) return;
-        index = this._wrap(index);
-      }
-      this._cycleTo(index);
+    this.target = this.dim * Math.round(this.offset / this.dim);
+    // Next
+    if (diff < 0) {
+      this.target += this.dim * Math.abs(diff);
+    } // Prev
+    else if (diff > 0) {
+      this.target -= this.dim * diff;
     }
-
-    prev(n: number = 1) {
-      if (n === undefined || isNaN(n)) {
-        n = 1;
-      }
-      let index = this.center - n;
-      if (index >= this.count || index < 0) {
-        if (this.noWrap) return;
-        index = this._wrap(index);
-      }
-      this._cycleTo(index);
+    // Set one time callback
+    if (typeof callback === 'function') {
+      this.oneTimeCallback = callback;
     }
-
-    set(n: number, callback: Function) {
-      if (n === undefined || isNaN(n)) {
-        n = 0;
-      }
-      if (n > this.count || n < 0) {
-        if (this.noWrap) return;
-        n = this._wrap(n);
-      }
-      this._cycleTo(n, callback);
+    // Scroll
+    if (this.offset !== this.target) {
+      this.amplitude = this.target - this.offset;
+      this.timestamp = Date.now();
+      requestAnimationFrame(this._autoScroll);
+    }
+  }
+
+  /**
+   * Move carousel to next slide or go forward a given amount of slides.
+   * @param n How many times the carousel slides.
+   */
+  next(n: number = 1) {
+    if (n === undefined || isNaN(n)) {
+      n = 1;
+    }
+    let index = this.center + n;
+    if (index >= this.count || index < 0) {
+      if (this.noWrap) return;
+      index = this._wrap(index);
+    }
+    this._cycleTo(index);
+  }
+
+  /**
+   * Move carousel to previous slide or go back a given amount of slides.
+   * @param n How many times the carousel slides.
+   */
+  prev(n: number = 1) {
+    if (n === undefined || isNaN(n)) {
+      n = 1;
+    }
+    let index = this.center - n;
+    if (index >= this.count || index < 0) {
+      if (this.noWrap) return;
+      index = this._wrap(index);
+    }
+    this._cycleTo(index);
+  }
+
+  /**
+   * Move carousel to nth slide.
+   * @param n Index of slide.
+   * @param callback "onCycleTo" optional callback.
+   */
+  set(n: number, callback?: CarouselOptions["onCycleTo"]) {
+    if (n === undefined || isNaN(n)) {
+      n = 0;
+    }
+    if (n > this.count || n < 0) {
+      if (this.noWrap) return;
+      n = this._wrap(n);
     }
-  }
+    this._cycleTo(n, callback);
+  }
+}