방명록
- [Javascript] 10초만에 이미지 슬라이드 무한루프 반복재생하기2024년 01월 21일 23시 53분 07초에 업로드 된 글입니다.작성자: 주사위 clice반응형
프로젝트를 하다가 이미지 슬라이드를 만들 일이 있었다
그래서 다양한 영상을 찾아봤는데 좌우로 슬라이드 되는 코드는 아래 영상을 보면 된다
https://youtu.be/qHzSQrLjxlQ?si=qu4nNl1GeI4PdhyJ
근데 나는 위 아래로 슬라이드 되는 코드가 필요했다
30분 정도 구글링을 하다가, 시간이 조금 지연되길래 날먹 방법을 생각해냈다
슬라이드 되는 동영상 다운 받아서 video로 만든 다음에 autoplay, loop로 자동재생, 무한루프 시키는것이다
그렇게 되면 슬라이드가 계속 바뀌는 것 처럼 보인다~
방법
넣을 동영상을 import 한 뒤에
넣고자 하는 위치에 아래 태그를 사용한다
<video src="동영상경로/파일명.mp4" poster="대체할 이미지 경로" width="가로사이즈" height="세로사이즈" loop="" autoplay="" muted=""></video>
직접 이미지를 쪼개서 넣고 직접 슬라이드를 만들어봐야겠지만, 이렇게 야매로 짜서 완성만 하는 경험도 중요한것 같다
마치 비둘기처럼..
반응형'프론트 > Javascript Typescript' 카테고리의 다른 글
[Javascript] hasOwnProperty 함수 알아보자 (크라임씬 법원 살인사건에서 다잉메세지로 범인 찾기) (0) 2024.02.21 [Typescript] 타입스크립트란? 한번 배우면 자바스크립트로 다시는 못 돌아감 (1) 2024.02.18 [Javascript] 프론트 개발자라면 알아야 할 호이스팅의 핵심 개념(호스팅 아니고 Hoisting) (1) 2024.01.23 [JavaScript] 주간모드/야간모드 버튼으로 바꾸기 (0) 2023.11.12 [Javascript] button을 클릭해도 함수 실행이 안 된다면? (onclick 속성에 대하여) (0) 2023.09.29 다음글이 없습니다.이전글이 없습니다.댓글