typescript slide

infinite

by uiwwnw

HTML

<div id="app1">
  <span style="text-align: center; font-size: 16px;line-height: 18;background: red;">1๐Ÿ“ </span>
  <span style="text-align: center; font-size: 16px;line-height: 18;background: blue;">2๐Ÿ“ </span>
  <span style="text-align: center; font-size: 16px;line-height: 18;background: grey;">3๐Ÿ“ </span>
  <span style="text-align: center; font-size: 16px;line-height: 18;background: orange;">4๐Ÿ“ </span>
</div>
<br><br>
<p>
  ์ธ๋ฑ์Šค
  <span id="text2"></span>
</p>
<div id="app2" style="height: 300px;">
  <div>
    <img style="width: 100%;    height: 100%;    object-fit: cover;" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
  </div>
  <div>
    <img style="width: 100%;    height: 100%;    object-fit: cover;" src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="">
  </div>
  <div>
    <img style="width: 100%;    height: 100%;    object-fit: cover;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1x97B2tI7iBjD6fw1YmgLB_1Jd4X7SG1TUcR0QIbj6iw1V7Yc" alt="">
  </div>
  <div>
    <img style="width: 100%;    height: 100%;    object-fit: cover;" src="https://previews.123rf.com/images/scyther5/scyther51610/scyther5161000005/64976808-%EC%82%AC%EC%A7%84%EB%B3%B4%EA%B8%B0-%EC%B9%B4%EB%A9%94%EB%9D%BC-%EC%82%AC%EC%A7%84-%EC%9E%91%EA%B0%80-%EB%A0%8C%EC%A6%88-lense-%EB%B9%84%EB%94%94%EC%98%A4-%EC%82%AC%EC%A7%84%EC%9D%84-%ED%86%B5%ED%95%B4-%EB%94%94%EC%A7%80%ED%84%B8-%EC%9C%A0%EB%A6%AC-%EC%86%90%EC%9D%84-%ED%9D%90%EB%A6%AC%EA%B2%8C-%ED%8F%AC%EC%BB%A4%EC%8A%A4-%EC%82%AC%EB%9E%8C%EB%93%A4%EC%9D%B4-%EA%B0%9C%EB%85%90-%EC%9E%AC%EA%B3%A0-%EC%9D%B4%EB%AF%B8%EC%A7%80.jpg" alt="">
  </div>
</div>
<br><br>
<div id="app3">
  <span style="text-align: center; font-size: 16px;line-height: 18;background: red;">1๐Ÿ“ </span>
  <span style="text-align: center; font-size: 16px;line-height: 18;background:...

SCSS

.slide-wrap {
  position: relative;
  overflow: hidden;
  height: 100%;
  .slide {
    display: flex;
    height: 100%;
    > * {
      flex: 1;
    }
  }
  .next {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border: 0;
    background: 0;
    &:before {
      display: block;
      width: 30px;
      height: 30px;
      transform: rotate(-45deg);
      border: 3px solid #fff;
      border-top: 0;
      border-left: 0;
      box-shadow: 1px 1px 1px rgba(0,0,0,.5);
      content: '';
    }
  }
  .prev {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border: 0;
    background: 0;
    &:before {
      display: block;
      width: 30px;
      height: 30px;
      transform: rotate(45deg);
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      box-shadow: -1px 1px 1px rgba(0,0,0,.5);
      content: '';
    }
  }
  .pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
    font-size: 0;
    
    li {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin: 6px 2px;
      border-radius: 7px;
      opacity: .5;
      transition: opacity .3s, width 1s;
      box-shadow: 1px 1px 1px rgba(0,0,0,.5);
      cursor: pointer;
      background: #fff;
      
      &.active {
        width: 21px;
        opacity: 1;
      }
    }
  }
}

TypeScript

interface SlideOption {
    currentIndex: number,
    full: boolean,
    infinite: boolean,
    button: boolean,
    pagination: boolean,
    change: Function,
    time: number
}

class Slide {
    private wrap: any;
    private option: any;
    private currentIndex: number;
    private length: number;
    private ea: number;
    private index: number;
    private limit: number;
    private change: any;
    private templete: string;
    private items: string;
    private item: any;
    private start: any;
    private end: any;
    private fake: any;
    private time: any;
    private pagination: any;
    private paginations: any;
    private pageIndex: any;
    private next: any;
    private prev: any;

    constructor(el: string, opt: SlideOption) {
        const _option = {
            currentIndex: 0,
            button: true,
            full: true,
            infinite: false,
            time: 700
        }
        this.wrap = document.querySelector(el);
        let pagination = '';
        let button = '';
        this.option = Object.assign(_option, opt);
        this.currentIndex = this.option.currentIndex;
        this.length = document.querySelectorAll(el + '>*').length;
        this.ea = +this.position(-(this.length - 1));
        this.limit = +this.ea * (this.length);
        if (this.option.infinite) {
            if (this.option.full) {
                this.items = this.wrap.innerHTML + this.wrap.innerHTML + this.wrap.innerHTML;
            } else {
                this.items = this.wrap.innerHTML + this.wrap.innerHTML + this.wrap.innerHTML + this.wrap.innerHTML;
            }
        } else {
            if (this.option.full) {
                this.items = this.wrap.innerHTML
            } else {
                this.items = this.wrap.innerHTML + this.wrap.innerHTML;
            }

        }
        this.change = this.option.change;

        if (this.option.pagination) {
            pagination += '<ol class="pagination">';
            for (let i =...