티스토리 뷰
안녕하세요.
코딩하는 영실이입니다!
오늘은 오랜만에 코딩에 대해서 포스팅해보겠습니다.
오늘은 순수 자바스크립트(javascript) vanillaJS 로
버튼으로 무한 슬라이드가 가능하고 오토플레이 멈춤 동작도 가능한
슬라이더(carousel slider)를 한 번 만들어보겠습니다.
오늘 만들 내용은 제 github 에 있으니 코드를 활용하고 싶은 분들은
https://github.com/gustn1029/slide 여기에서 확인하시면 됩니다~
먼저 실제 visual 영역에서 사용할 때를 가정해서
이미지와 문구를 넣고 슬라이드를 만들었습니다.
먼저 visual_wrap 으로 감싸서 width 를 결정하고
slide_wrap 을 통해 슬라이드 되는 영역을 overflow: hidden 해주었습니다.
그리고 slide_list 를 통해서 실제로 slide_conts 가 슬라이드 되도록 만들었습니다.
button 은 prev, play, pause, next 이렇게 4개의 버튼을 만들었고,
play, pause 는 실행되는 이벤트에 맞춰서 서로 바뀌도록 만들었습니다.
css 는 간단하게 문구와 버튼의 위치만 잡아주었습니다. 그리고 .slide_conts 는 float:left 로 왼쪽으로 위치시켰습니다.
먼저 prevEvent, nextEvent function 을 만들어서
버튼을 클릭할 때 이벤트 함수가 실행 되도록 만들었습니다.
play, pause 버튼은 setInterval, clearInterval 을 활용하여 만들었습니다.
일단 먼저 태그들을 변수에 담았고,
slideWidth 를 100 으로 설정하고 % 로 width 를 설정했습니다. carIndex 는 slide_conts 의 인덱스를 선택하기 위한 변수이고,
carSlide 는 선택된 인덱스의 slide_conts 를 담기 위해서 만들었습니다.
그리고 무한루프처럼 슬라이드가 끊기지 않고 무한으로 반복될 수 있도록
cloneNode 를 활용하여 slide_list 의 처음과 마지막에 각각
첫번째 slide_conts 와 마지막 slide_conts 를 추가해줬습니다.
slideList의 width는 (slideWidth * (slideLen + 2))%값으로 설정해줍니다.
- +2 를 해주는 이유는 아까 cloneNode 로 추가한 2개의 값을 더해준 것 입니다.
그리고 slideList는 초기값으로 translate(-${contsWidth * (startNum + 1)}% , 0) 값을 설정해줍니다.
- 이유는 cloneNode 로 slide_conts가 하나 추가 되어 있기 때문입니다.
slide_cont의 width는 let contsWidth = (slideWidth / (slideLen + 2)% 로
변수 contsWidth에 할당하여 사용하였습니다.
그리고 초기값을 설정해주었습니다. 먼저 carIndex의 값을 startNum 으로 설정해주었습니다.
그 뒤에 carSlide를 slideConts[carIndex]로 설정했습니다.
그리고 carSlide에 active 값을 클래스에 추가시켰습니다.
그럼 첫번째로 slideConts[0]클래스에 active 값이 추가 될것입니다.
이제 함수를 만들어보겠습니다. 먼저 function nextEvent()를 만들었습니다.
일단 carIndex <= slideLen - 1 일 때,
자연스럽게 슬라이드 되도록
slideList의 transition을 all 0.3s 를 설정해주고,
slideList를 translate(-${contsWidth * (carIndex + 2)}%, 0) 만큼 이동시켜줍니다.
- carIndex 의 초기값이 0 이기 때문에 +2 를 해줘야 됩니다.
그리고 carIndex === slideLen - 1 일 때(마지막 슬라이드),
setTimeout 을 활용하여 자연스럽게 처음 값으로 추가했던 cloneNode 로 넘어가게 해줍니다.
이때 slideList의 transition = 0s, transform = translate(-${contsWidth}%, 0) 으로 설정해서
아무런 변화 없이 바로 첫번째 슬라이드로 이동하도록 설정해줍니다.
그리고 click Event가 실행 될 때 마다
carSlide 클래스에서 active값을 지우고,
carSlide값을 slideConts[++carIndex]로 변경해줍니다.
그 뒤에 다시 carSlide 클래스에 active값을 추가해줘서
active값이 carIndex값에 맞게 이동될 수 있도록 설정해줍니다.
function prevEvent() 도 비슷하게
carIndex >= 0 일 때,
자연스럽게 슬라이드 되도록
slideList의 transition을 all 0.3s 를 설정해주고,
slideList를 translate(-${contsWidth * carIndex}%, 0) 만큼 이동시켜줍니다.
- 이 때는 +2를 하지 않습니다.
그리고 carIndex === 0 일 때(첫번째 슬라이드),
setTimeout 을 활용하여 자연스럽게 마지막 값으로 추가했던 cloneNode 로 넘어가게 해줍니다.
이때 slideList의 transition = 0s, translate(-${contsWidth * slideLen}%, 0) 으로 설정해서
아무런 변화 없이 바로 마지막 슬라이드로 이동하도록 설정해줍니다.
그리고 click Event가 실행 될 때 마다
carSlide 클래스에서 active값을 지우고,
carSlide값을 slideConts[--carIndex]로 변경해줍니다.
그 뒤에 다시 carSlide 클래스에 active값을 추가해줘서
active값이 carIndex값에 맞게 이동될 수 있도록 설정해줍니다.
마지막으로 paly, pause 버튼 이벤트입니다.
먼저 값을 변경할 수 있는 let으로 play변수를 하나 만들어줍니다.
그리고 play, pause버튼에 각각 click event를 만들어서
play 버튼을 클릭하면 play에 setInterval값을 할당한 뒤,
play 버튼을 숨기고 pause버튼을 보여줍니다.
그리고 pause버튼을 클릭하면 clearInterval(play)를 실행한 뒤,
pause 버튼을 숨기고 play버튼을 보여줍니다.
오늘은 이렇게 순수자바스크립트(javascript) vanillaJS 로 슬라이더(carousel slider) 를
만들어봤습니다. 조금이나마 도움이 됐으면 좋겠네요!
저도 아직 배워가는 입장이라 완벽하지 않을 수 있습니다.
많은 태클 부탁드릴게요!
감사합니다~