[Project/JS/배너] 자바스크립트로 이미지 슬라이드 구현 - 슬라이드 기능 구현

저번에 작성한 설계 그림을 보고 오늘은 구체화 시키고, 코드까지 작성해보려고 한다.

슬라이드 구현 

웹 브라우저에서 이미지 슬라이드를 "직접" 구현하기 위한 아이디어를 찾아보았다.

• 이미지를 하나의 필름처럼, 늘어놓고 옆으로 이동시키는 개념으로 구현하는 거였다.
• 이미지를 하나의 필름 처럼 늘어놓기 위해서, Float이나 Flexbox를 이용할 수 있고, 옆으로 이동시키기 위해서는 Margin을 주거나, left와 같은 position을 변경할 수도 있을거 같다.
• 이미지들을 FlexBox로 쭉 늘어놓고, Margin-left를 줘서 밀어내는 방식으로 구현하려고 한다. 

 

prev,next 버튼

• prev버튼을 누르면 , 이미지의 크기만큼 margin-left의 +값을 해주고, next버튼을 누르면 이미지 크기만큼의 margin-left값을 -해줘야한다.
• 그리고, 경계값에 대한 처리를 생각해야한다. 일단, 경계값을 알기 위한 방법은 많겠지만, 전체 Slide의 갯수를 알고, 현재위치만 안다면, 쉽게 처리할 수 있을거다. margin-left를 다시 0으로 초기화 시키는 방법이 있을거 같다.

필요한값

1. 전체 Slide의 갯수 - SlideNumber

2. 현재 Slide의 위치 - currentIdx

3. 이미지의 크기 - 이미지의 크기만큼 옆으로 넘기기.

export default class Simlple_image{
	#sliderWrapEl;
    #sliderListEl;
    #sliderEl;
    sliderNumber;
    currentIdx=0;
	sliderScale;
    
   	...
    
    onMoveNext(){
    	this.currentIdx+=1
    	this.sliderListEl.style.marginLeft= `-${this.currentIdx * this.sliderScale}`;
    }
    onMovePrev(){
    	this.currentIdx-=1
    	this.sliderListEl.style.marginLeft= `-${this.currentIdx * this.sliderScale}`;
    }
    ...
    

}

Indicator

• 현재 활성화된 Slider를 가리키는 indicator입니다. 
• 슬라이드가 움직일 때, Indicator 또한 움직여야합니다.

export default class ImgSlider{

	...
	createIndicator(){
    	const DocFragment = document.createDocumentFragment();
        for (let i =0; i<this.slideNumber;i++){
        	const li = document.createElement(li);
            li.dataset.sliderIdx=i;
            docFragment.appendChild(li);
        }
    	this.indicatorWrapEl.querySelector('ul').appendChild(DocFragment);
    }
    
    setIndcator(){
    	this.indicatorWrapEl.querySelector('li.active')?.classList.remove('active');
        this.indicatorWrapEl.querySelector(`ul li:nth-child(${this.currentIdx +1})`)
        .classList.add('active');
    }
	...
    
}

 

Controller

• autoplay 기능이 기본으로 있다고 생각하겠습니다.
• SetInterval을 이용해서, 2초마다 옆으로 넘기면 됩니다.
• 일시정지한다면, 등록되어있는 InterValId를 삭제합니다.

Default값은 오토플레이 상태입니다.

버튼을 Toggle하기 위해서, HTML에 dataset을 달아주겠습니다.

export default class ImgSlider{
	...
    //Auto play 기능
    // Interval 이벤트를 걸어준다.
      onAutoPlay(){
    this.#interValId= setInterval(this.onMoveNext.bind(this),2000);
  }
    
      onTogglePlay(event){
    if(event.target.dataset.status==='play'){
      this.autoplay=true;
      this.controlWrapEl.classList.add('play');
      this.controlWrapEl.classList.remove('pause');
      this.onAutoPlay();
    }else if(event.target.dataset.status ==='pause'){
      this.autoplay = false;
      this.controlWrapEl.classList.add('pause');
      this.controlWrapEl.classList.remove('play');
      clearInterval(this.#interValId);
    }
  }
    ...


}

 

추가할 기능

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

버그 

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