[Project/JS/배너/설계] 자바스크립트로 이미지 슬라이더(Swiper) 직접 만들기 - 설계

홈페이지를 들어가보면, 움직이는 배너를 볼 수 있다. 이번 프로젝트는 배너를 Vanilla JS로 구현해볼거다!

배너를 만드는 라이브러리는 이미 잘 만들어저있다.(Swiper JS, React Slick 등)  빠르게 작업을 해야할 때는 라이브러리를 활용하되, 라이브러리 또한 JS로 이루어져있기 때문에, 한번 만들어보고 싶어졌다.

HTML Box Modeling 하기 (Wire Frame)

• Slider-wrap : 이미지 슬라이더 최상위 Div 입니다. 
• Slider : 슬라이더들을 감싸고 있는 Slider div입니다. 하위 컴포넌트로, ul > li 형태로 slider가 여러장 있는걸로 구현합니다. 
• Button : Next, Prev 등 클릭하면 이미지 슬라이드가 넘어가게 만들겁니다.
• indicator : 현재 있는 이미지 슬라이드가 몇번째 인지  알려주는 Indicator를 만들어줍니다.
• controller : Autoplay기능을 넣기 위해서, Pause, play 버튼을 만들어줍니다.

생각해야할 것들

흔한 Banner의 UX

이미지를 쭉 나열 해놓기

• HTML에서 배너를 구현하기 위해서는 이미지가 가로로 쭉 나열될 필요가 있습니다.(필름처럼, 오른쪽에 다음 그림 있는 형식으로)

Next,Prev 버튼

• Next 버튼을 누르면, 이미지가 다음 슬라이드로 넘어갑니다.
• Prev 버튼을 누르면, 이미지가 이전 슬라이드로 넘어갑니다.

Indicator

• 현재 있는 current 위치를 표시해주는 친구입니다.
• 현재 있는 위치는 회색으로 CSS 처리를 해줄겁니다. 

이미지 슬라이드 경계값 처리

• 이미지 슬라이드의 맨 끝에서 다음 버튼을 누른다면,첫번째 이미지로 가야합니다. 
• 마찬가지로, 이미지 슬라이드의 맨 앞에서 , 이전 버튼을 누른다면 맨 끝의 이미지로 가야합니다. 
• 즉, 이미지의 앞,뒤가 연결되서 하나의 원형처럼 움직여야합니다.

Autoplay Stop,Pause 기능

• 일정시간마다, 오른쪽으로 넘기는 autoplay기능을 구현해줍니다.
• 일시정지 했을 때는 Autoplay 기능을 멈춥니다.

주의할 것

SetInterval 이벤트를 걸어줘야할 거 같은데, next 버튼을 누르거나, prev 버튼을 눌렀을 때 , SetInterval을 다시 등록해줘야한다. 안그러면, 사용자의 입장에서는 한꺼번에 2개씩 넘어갈 수 있음.