<div class="slider">

  <div class="slider_wrapper">
    <div class="slider_track">

      <div class="slide_item">
        <img src="https://via.placeholder.com/1920x1080?text=1" alt="">

        <div class="slide_content">
          <h1 class="slide_title">Template 1</h1>
          <button class="default_btn">Get started</button>
        </div>

      </div>

      <div class="slide_item">
        <img src="https://via.placeholder.com/1920x1080?text=2" alt="">
        <div class="slide_content">
          <h1 class="slide_title">Template 2</h1>
          <button class="default_btn">Get started</button>
        </div>
      </div>

      <div class="slide_item">
        <img src="https://via.placeholder.com/1920x1080?text=3" alt="">
        <div class="slide_content">
          <h1 class="slide_title">Template 3</h1>
          <button class="default_btn">Get started</button>
        </div>
      </div>

    </div>
    <div class="prev_arrow"></div>
    <div class="next_arrow"></div>

    <div class="slide_dots">
      <!-- <div class="dot"></div> -->
      <!-- <div class="dot dot_active"></div> -->
    </div>
  </div>

</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Slider */
.slider {
}

.slider_wrapper {
  overflow: hidden;

  height: 100vh;
  position: relative;
}

.slider_track {
  display: flex;
}

.slide_item {
  min-width: 100%;
  height: 100vh;
  position: relative;
}

.slide_img {
  display: block;
  min-width: 100%;
}

.slide_content {
  width: 100%;
  max-width: 590px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.slide_subtitle {
  font-family: "Raleway", sans-serif;
  font-size: 36px;
  color: #fff;
  font-weight: 500;
}

.slide_title {
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  font-family: "Raleway", sans-serif;
  margin: 12px 0;
}

.slide_text {
  font-weight: 400;
  word-wrap: break-word;
  color: #fff;
  line-height: 1.8;
  padding-bottom: 50px;
}

.default_btn {
  text-transform: uppercase;
  color: #fff;
  border: none;
  border-radius: 3px;
  background-color: #998675;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  padding: 15px 30px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s linear;
  border-bottom: 3px solid #736357;
}

.default_btn:hover {
  background-color: #7c6c5f;
}

.prev_arrow,
.next_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  cursor: pointer;
}

.prev_arrow {
  left: 150px;
  border-left: 2px solid #a3a2a0;
  border-bottom: 2px solid #a3a2a0;
  transform: rotate(45deg);
}

.next_arrow {
  right: 150px;
  border-right: 2px solid #a3a2a0;
  border-bottom: 2px solid #a3a2a0;
  transform: rotate(-45deg);
}

.slide_dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #949291;
  border-radius: 100%;
  margin-right: 10px;
  cursor: pointer;
}

.dot:last-child {
  margin-right: 0;
}

.dot_active {
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  background-color: transparent;
}

"use strict";

class SliderCarousel {
  constructor({
    main,
    wrap,
    prev,
    next,
    pagination,
    infinity = false,
    position = 0,
    slidesToShow = 3
  }) {
    if (!main || !wrap) {
      console.warn(
        'Slider carousel: Necessary to add 2 options, "main" and "wrap" !'
      );
    }
    this.main = document.querySelector(main);
    this.wrap = document.querySelector(wrap);
    this.slides = document.querySelector(wrap).children;
    this.prev = document.querySelector(prev);
    this.next = document.querySelector(next);
    this.pagination = document.querySelector(pagination);
    this.slidesToShow = slidesToShow;
    this.options = {
      position,
      infinity,
      widthSlide: 100,
      maxPosition: this.slides.length - this.slidesToShow
    };
  }

  init() {
    this.addGloClass();
    this.addStyle();
    if (this.prev && this.next) {
      this.dots();
      this.controlSlider();
    } else {
      this.dots();
      this.addArrow();
      this.controlSlider();
    }
  }

  addGloClass() {
    this.main.classList.add("glo-slider");
    this.wrap.classList.add("glo-slider__wrap");
    for (const item of this.slides) {
      item.classList.add("glo-slider__item");
    }
  }

  addStyle() {
    const style = document.createElement("style");
    style.id = "sliderCarousel-style";
    style.textContent = `
            .glo-slider {
                overflow: hidden;
                
            }
            .glo-slider__wrap {
               
                transition: transform 0.5s;
               
            }
            .glo-slider__item {
                
                
            }
        `;
    document.head.appendChild(style);
  }

  dots() {
    if (this.pagination) {
      this.dotArray = [];
      for (let i = 0; i < this.slides.length; i++) {
        const dot = document.createElement("span");
        dot.classList.add("dot");
        this.pagination.appendChild(dot);

        if (i == 0) {
          dot.className += " dot_active";
        }
        this.dotArray.push(dot);
      }

      this.dotArray.forEach((item, indexDot) => {
        item.addEventListener("click", () => {
          this.options.position = indexDot;
          console.log(indexDot);
          this.currentSlide(this.options.position);
        });
      });
    }
  }

  controlSlider() {
    this.prev.addEventListener("click", this.prevSlider.bind(this));
    this.next.addEventListener("click", this.nextSlider.bind(this));
  }

  currentSlide(index) {
    this.wrap.style.transform = `translateX(-${
      index * this.options.widthSlide
    }%)`;
    this.currentDot(index);
  }

  currentDot(index) {
    for (let dot of this.dotArray) {
      dot.classList.remove("dot_active");
    }
    this.dotArray[index].classList.add("dot_active");
  }

  prevSlider() {
    if (this.options.infinity || this.options.position > 0) {
      --this.options.position;

      if (this.options.position < 0) {
        this.options.position = this.options.maxPosition;
      }

      console.log(this.options.position);
      if (this.dotArray) {
        this.currentDot(this.options.position);
      }

      this.wrap.style.transform = `translateX(-${
        this.options.position * this.options.widthSlide
      }%)`;
    }
  }

  nextSlider() {
    if (
      this.options.infinity ||
      this.options.position < this.options.maxPosition
    ) {
      ++this.options.position;

      if (this.options.position > this.options.maxPosition) {
        this.options.position = 0;
      }
      console.log(this.options.position);
      if (this.dotArray) {
        this.currentDot(this.options.position);
      }

      this.wrap.style.transform = `translateX(-${
        this.options.position * this.options.widthSlide
      }%)`;
    }
  }

  addArrow() {
    this.prev = document.createElement("button");
    this.next = document.createElement("button");

    this.prev.className = "glo-slider__prev";
    this.next.className = "glo-slider__next";

    this.main.appendChild(this.prev);
    this.main.appendChild(this.next);

    const style = document.createElement("style");
    style.textContent = `
            .glo-slider__prev,
            .glo-slider__next {
                cursor: pointer;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                border: 20px solid transparent;
                background: transparent;
            }
            .glo-slider__prev {
                left: 20px;
                border-right-color:  #19b5fe;
            }
            .glo-slider__next {
                right: 20px;
                border-left-color:  #19b5fe;
            }

            .glo-slider__prev:hover,
            .glo-slider__next:hover,
            .glo-slider__prev:focus,
            .glo-slider__next:focus {
                background: transparent;
                outline: none;
            }
            
        `;
    document.head.appendChild(style);
  }
}

const carousel = new SliderCarousel({
  main: ".slider_wrapper",
  wrap: ".slider_track",
  prev: ".prev_arrow",
  next: ".next_arrow",
  pagination: ".slide_dots",
  slidesToShow: 1,
  infinity: true
});
carousel.init();