.white-wrapper {
  position: relative;
  padding-top: 80px;
  background-color: #f7f7f7;
  height: 1000px;
  z-index: 1000;
}
.slider-container {
  width: 300px;
  position: relative;
  margin: 0 auto;
}
.slider-content-wrapper {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.slider-content-wrapper::-webkit-scrollbar {display: none;}

.slider-content {display: flex;}
.slider-image {width: 300px; scroll-snap-align: center;}
.slider-button {position: absolute; bottom: -110px;font-size: 40px; cursor: pointer;}
.left-button {left: 10px;}
.right-button {right: 10px;}

.slider-index {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
}

// slider영역의 스크롤 Container
class SliderChang {
  constructor() {
    this.sliderContentWrapper = document.querySelector('.slider-content-wrapper');
    this.sliderImage = document.querySelectorAll('.slider-image');
    this.sliderIndex = document.querySelector('.slider-index');
    this.sliderContainer = this.sliderContainer.bind(this);
    this.currentImgage = 0;
    this.eventHandle();
  }

  sliderChangHandle(step){
    this.currentImgage += step;
    if(this.currentImgage < 0) this.currentImgage = this.sliderImage.length - 1;
    if(this.currentImgage >= this.sliderImage.length) this.currentImgage = 0
    this.sliderContentWrapper.scrollLeft = this.sliderImage[this.currentImgage].offsetLeft;
  }

  sliderContainer(){
    const imageWidth = document.querySelectorAll('.slider-image')[0].offsetWidth
    this.currentImgage = Math.round(this.sliderContentWrapper.scrollLeft / imageWidth);
    this.sliderIndex.innerText =`${this.currentImgage + 1} / ${this.sliderImage.length}`
  }

  eventHandle() {
    this.sliderContentWrapper.addEventListener('scroll', this.sliderContainer)

    document.querySelector('.left-button').addEventListener('click' ,() => {
      this.sliderChangHandle(-1);
    });
    document.querySelector('.right-button').addEventListener('click' ,() => {
      this.sliderChangHandle(1);
    });
  }
}

new SliderChang();