반응형 js slide2 자바스크립트 관련 - 일반 슬라이드, requestAnimationFrame 자바스크립트를 사용한 슬라이드, requestAnimationFrame 사용, setTimeout / setInterval 사용하지 않음 좌우 버튼을 클릭해서 슬라이드 형태로 내용이 바뀌는 스크립트 html 제목1 사용자1 제목2 사용자2 제목3 사용자3 제목4 사용자4 {{info.imgNo + 1}} / {{info.imgLen}} css ...... .btn_progress::after{content:"";position:absolute;left:0;top:0;display:flex;align-items:center; justify-content:center;width:100%;height:100%; background:url(/pause_img.svg) no-repeat center;opacity.. 2022. 9. 26. 자바스크립트 관련 - 무한 슬라이드, requestAnimationFrame 자바스크립트와 css를 사용해서 무한 슬라이드, requestAnimationFrame, cancelAnimationFrame 간단히 왼쪽에서 오른쪽으로 무한하게 움직이지만 해당 영역에 마우스를 가져가면 멈추고, 영역에서 나가면 다시 움직이는 슬라이드 효과를 만들어보자. html css /* slide가 되려고 컨텐츠들 가로 정렬 */ .slider_area{display:flex;}/* translateX가 0%가 되면 다시 -50%로 가도록 */ .slider_wrap{display:flex;} js(vue) const {createApp, ref, computed, onMounted} = Vue; const slide = { setup() { // ref() 를 사용하면 js에선 .value로 찾아.. 2022. 9. 23. 이전 1 다음 반응형