jQueryが使いたくない　web制作プロジェクトを添えて．．．

"use strict";

export interface SliderOption {
  timer: number;
  transitionOption: string;
}

export class NoVegas {
  imgArray: Array<String>;
  target: string;
  option: SliderOption;
  private break: boolean;
  private imgStyle: string = `
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        min-height: 100vh;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    `;

  constructor(imgArray: Array<String>, target: string, option?: SliderOption) {
    this.imgArray = imgArray;
    this.target = target;
    this.option = option || {
      timer: 5000,
      transitionOption: "all ease .5s",
    };
    this.break = true;
    this.setSlider();
  }
  private sleep = (t?: number): Promise<void> =>
    new Promise((resolve) =>
      setTimeout(() => resolve(), t || this.option.timer)
    );
  private setSlider = async (): Promise<void> => {
    const imgNum = this.imgArray.length;
    const targetDom = document.querySelector(this.target);
    targetDom.setAttribute("style", "position: relative; z-index: 1");
    for (let c of targetDom.children) {
      c.setAttribute("style", "position: relative; z-index: 9999;");
    }
    const imgDomUp = document.createElement("div");
    const imgDomDown = document.createElement("div");
    imgDomDown.setAttribute(
      "style",
      this.imgStyle +
        `
                background-image: url(${this.imgArray[0]});
                z-index: 2;
            `
    );
    targetDom.appendChild(imgDomUp);
    targetDom.appendChild(imgDomDown);
    let i = 0;
    while (this.break) {
      await this.sleep();
      imgDomUp.setAttribute(
        "style",
        this.imgStyle +
          `
            background-image: url(${this.imgArray[i]});
            z-index: 3;
        `
      );
      await this.sleep(1000);
      imgDomUp.setAttribute(
        "style",
        this.imgStyle +
          `
            background-image: url(${this.imgArray[i]});
            opacity: 0;
            z-index: 3;
            transition: ${this.option.transitionOption};
        `
      );
      i = i + 1 == imgNum ? 0 : i + 1;
      imgDomDown.setAttribute(
        "style",
        this.imgStyle +
          `
            background-image: url(${this.imgArray[i]});
            z-index: 2;
        `
      );
    }
  };
  changeStyle = (
    imgArray: Array<string>,
    target: string,
    option?: SliderOption
  ): void => {
    this.break = false;
    this.imgArray = imgArray;
    this.target = target;
    this.option = option || {
      timer: 5000,
      transitionOption: "all ease .5s",
    };
    this.break = true;
    this.setSlider();
  };
}

'use strict';

import * as slider from './slider';

let imgArray = [
  './image.jpg',
  './image2.jpg'
];

const noVegasSlider = new slider.noVegas(imgArray, '#main');