[Project/JS/배너] 자바스크립트로 이미지 슬라이더 직접 만들기 - 오류,기능추가!

추가할 기능

• Slider의 끝과 처음이 연결되어있는 듯한 효과
• Indicator을 클릭하면 , 해당 index로 이동하는 기능

버그 

• Next 버튼을 클릭할 때, 뭔가 점점 빨라지는 현상 원인 

점점 빨리지는 현상의 원인

• Next 버튼을 눌렀을 때도, SetInterval의 이벤트루프는 동작하고 있기 때문이다.Next버튼이나, Prev버튼을 눌렀을 때 다시 Interval을 초기화 시켜줘야한다. 
• Interval을 초기화하는 코드가 많아져서, 따로 함수로 구현하였다.

* 추가 코드 

  onMoveNext(){
   ...
	onResetInterval(this.autoplay)
    ...
  }
  
  onResetInterval(IsAutoPlay){
    if(IsAutoPlay){
      clearInterval(this.#interValId);
      this.#interValId= setInterval(this.onMoveNext.bind(this),2000);
    }
  }

Indicator을 클릭하면 , 해당 index로 이동하는 기능

• Event위임을 이용하기 위해서, html에 dataset을 미리 설정해놨음.
  • indicator들 사이를 클릭했을 때, undefined가 뜰 수 있기 때문에, undefined도 처리를 해주려고 합니당.

* 추가 코드

 ... 
 onClickIndicator(event){
    const position = parseInt(event.target.dataset.sliderIdx);
    const IsNumber = !!position
    //console.log(position)
    //indicator 사이의 undefined인 경우 
    if(!IsNumber){
      return
    }
    this.#currentIdx = position;
    this.#sliderLstEl.style.marginLeft = `-${this.#sliderScale*this.#currentIdx}px`;
    this.onResetInterval(this.autoplay);
    this.onSetIndicator();
 }
 
 ...

 

Slider의 끝과 처음이 연결되어있는 듯한 효과

• 맨 앞의 이미지를 복사하여, 뒤에 붙이면 된다고 하는데, trasition을 손보지 않는 이상, 아래와 같이 모든 Element들이 스르륵 보이게 된다.
• 요건 좀 더 고민하고 구현을 해보도록 하겠다.  (Swiper JS를 써봤을 때, Swiper는 이걸 다 처리해놨던데 ..흠 )

bandicam 2022-09-02 17-19-41-220.mp4

2.33MB

 

제 깃헙입니다.

https://github.com/ChoboProgrammer/SimpleImage_repo

GitHub - ChoboProgrammer/SimpleImage_repo